1

Nuxt-Ts アプリケーションで@vue/apollo- composableを使用しようとしています。これは、「通常の」Vue アプリケーションでルート インスタンスに注入する方法の例です。

import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'

const app = new Vue({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: h => h(App),
})

問題: Nuxt-TSのルート インスタンスにアクセスする方法がわかりません。

プラグインを作成しようとしましたが、ルート インスタンスに直接注入されます (これは正しくありません。これは、独自のプロパティを作成するため@vue/apollo-composableです。composition-api::provide()_provided

そして、nuxt プラグインを使用するとinject、$get が連結されます。_providedそして、オブジェクトを経由で直接書き込むと、ctx.app._provided =固執しません。

import { DefaultApolloClient } from "@vue/apollo-composable";
const myPlugin: Plugin = (context, inject) => {
  const defaultClient = ctx.app.apolloProvider.defaultClient;
  inject(DefaultApolloClient.toString(), defaultClient) // results in $$ and also composition-api::inject is checking inside `_provided[DefaultApolloClient]`
}

export default myPlugin

provide()関数内でのみ許可されているため、元の例のように呼び出すことはできませんVueComponent::setup。

また、コンポーネントを作成して、必要なページでそれを使用することも試みました（ただし、ルートインスタンスにインストールする目的を無効にします）

const InstallGraphQl = createComponent({
  name: "InstallGraphQl",
  setup(_props, ctx: any) {
    debugger;
    const apolloClient = ctx.app.apolloProvider.defaultClient;
    ctx.provide(DefaultApolloClient, apolloClient);
  },
});
export default createComponent({
  name: "DefaultLayout",
  components: {
    InstallGraphQl
  },
  setup(_props, _ctx: SetupContext) {
    const { result } = useQuery(SharedLayoutQuery);
    return { result };
  },
});

しかしsetup、エクスポートされたコンポーネントの前に呼び出されInstallGraphQl::setupます...

編集: また、詳細については、@vue/apollo-composableこちらのディスカッションを参照してください: https://github.com/vuejs/vue-apollo/issues/687

4

3 に答える 3

6

setup()ルート オプションにa を設定するだけです。

/* plugins/provide-apollo-client.js */

import {provide} from '@vue/composition-api'
import {DefaultApolloClient} from '@vue/apollo-composable'

export default function ({app}) {
  app.setup = () => {
    provide(DefaultApolloClient, ...)
  }

  // Or, use local mixin
  app.mixins = (app.mixins || []).concat({
    setup () {...},
  })
}

/* nuxt.config.js */

export default {
  plugins: ['~/plugins/provide-apollo-client'],
}

ただし、nuxt-ts にはあまり詳しくありませんが、コードは機能するはずだと思います。

于 2019-12-10T15:38:12.083 に答える