Я пытаюсь использовать @vue / apollo-composable с моим приложением Nuxt-Ts. Это пример того, как его следует внедрить в корневой экземпляр в обычном приложении 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
использует _ 3_, который создает собственное свойство _provided
.
И если я использую подключаемый модуль nuxt inject
, то получается $
конкатенированный. И если я напишу объект _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
экспортированных компонентов вызывается до _14 _...
Изменить: также для получения дополнительной информации о @vue/apollo-composable
см. Обсуждение здесь: https://github.com/vuejs/vue-apollo/issues/687