Setup
Make sure you have installed Apollo Client.
1. Install @vue/apollo-composable
npm install --save @vue/apollo-composable
Or:
yarn add @vue/apollo-composable
2. Connect Apollo Client to Vue
Vue 2
In your root instance, you need to provide a default Apollo Client instance:
import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'
const app = new Vue({
setup () {
provide(DefaultApolloClient, apolloClient)
},
render: h => h(App),
})
WARNING
In the rest of the guide, we will show code examples with Vue 3. If you need Vue 2, you might want to import the Composition API functions from '@vue/composition-api'
instead of 'vue'
.
Vue 3
import { createApp, provide, h } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'
const app = createApp({
setup () {
provide(DefaultApolloClient, apolloClient)
},
render: () => h(App),
})
Multiple clients
You can also provide multiple Apollo Client instances to be used in your application. In this case, it's recommended to provide a default
one:
import { provide } from 'vue'
import { ApolloClients } from '@vue/apollo-composable'
const app = new Vue({
setup () {
provide(ApolloClients, {
default: apolloClient,
})
},
render: h => h(App),
})
You can add other client instances alongside it:
provide(ApolloClients, {
default: apolloClient,
clientA: apolloClientA,
clientB: apolloClientB,
})
You can then select which one to use in functions we will cover next (such as useQuery
, useMutation
and useSubscription
) with the clientId
option.
Usage outside of setup
When using e.g. useQuery
outside of vue contexts, the clients cannot be injected using vue's provide/inject mechanism. @vue/apollo-composable
can manage their own apollo clients
Use provideApolloClient
for a single default client:
import { provideApolloClient } from "@vue/apollo-composable";
const query = provideApolloClient(apolloClient)(() => useQuery(gql`
query hello {
hello
}
`))
const hello = computed(() => query.result.value?.hello ?? '')
Use provideApolloClients
for multiple clients:
import { provideApolloClients } from "@vue/apollo-composable";
provideApolloClients({
default: apolloClient,
clientA: apolloClientA,
clientB: apolloClientB,
})