apollo/packages/docs/src/guide-composable/setup.md

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

Note: @vue/apollo-composable supports Vue 2 thanks to Vue Demi.

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),
})

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/composition-api'
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.