问题
I'm trying to use @vue/apollo-composable with my Nuxt-Ts application. This is the example how it should be injected into root instance on a "normal" Vue application:
import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'
const app = new Vue({
setup () {
provide(DefaultApolloClient, apolloClient)
},
render: h => h(App),
})
Problem: I don't know how to get access to the root instance in Nuxt-TS.
I tried making a plugin, but it's injected either directly into the root instance (which is not right, because @vue/apollo-composable
is using composition-api::provide() which creates it's own property _provided
.
And if I use nuxt plugin's inject
a $
get's concatenated. And if I write a _provided
object directly in via ctx.app._provided =
it doesn't stick.
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
I can't call provide()
like in the original example, because it's only allowed inside a VueComponent::setup
function.
I also tried creating a Component and just use it on the page I need it (kind of defeats the purpose of installing in root instance though)
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 };
},
});
but then setup
of the exported components gets called before InstallGraphQl::setup
...
Edit: Also for more information about @vue/apollo-composable
see discussion here: https://github.com/vuejs/vue-apollo/issues/687
回答1:
Just set a setup()
to the root options:
/* 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'],
}
Not much familiar with nuxt-ts though, but I think the code should just work.
回答2:
I don't use nuxt-ts but i do have this setup in a nuxt application. In my default.vue template i provide like this.
<script>
import { provide } from '@vue/composition-api';
import { ApolloClients } from '@vue/apollo-composable'
export default {
setup(props, context) {
provide(ApolloClients, {
default: context.root.$apollo,
})
}
}
</script>
Package versions are
"@vue/apollo-composable": "4.0.0-alpha.1"
"@vue/composition-api": "version": "0.3.4"
Apollo Setup
//apolloClient.js
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import link from './link';
export default function apolloClient(_, inject) {
const cache = new InMemoryCache();
const client = new ApolloClient({
// Provide required constructor fields
cache,
link,
// Provide some optional constructor fields
name: 'apollo-client',
queryDeduplication: false,
defaultOptions: {
watchQuery: {
fetchPolicy: 'cache-and-network',
},
},
});
inject('apollo', client);
}
// link.js
import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import fetch from 'unfetch';
const httpLink = new HttpLink({
uri: 'http://localhost:8080/v1/graphql',
credentials: 'same-origin',
fetch,
});
const wsParams = {
uri: `ws://localhost:8080/v1/graphql`,
reconnect: true,
};
if (process.server) {
wsParams.webSocketImpl = require('ws');
}
const wsLink = new WebSocketLink(wsParams);
// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
// split based on operation type
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink,
);
export default link;
Then with the above, you include apollo in your nuxtconfig as a plugin
plugins: [
'~/plugins/vue-composition-api',
'~/plugins/apolloClient'
],
回答3:
There is now an official onGlobalSetup helper for this in nuxt-composition-api
According to the documentation, you simply use it in a plugin like so:
import { onGlobalSetup } from 'nuxt-composition-api'
export default () => {
onGlobalSetup(() => {
provide('globalKey', true)
})
}
来源:https://stackoverflow.com/questions/59198021/how-to-provide-inject-into-vue-root-instance-with-nuxt-and-vue-composition-api