Setup

Make sure you have installed Apollo Client.

1. Install @vue/apollo-components

npm install --save @vue/apollo-option @vue/apollo-components

Or:

yarn add @vue/apollo-option @vue/apollo-components

2. Create the Apollo client

import { ApolloClient, InMemoryCache } from '@apollo/client/core'

const cache = new InMemoryCache()

const apolloClient = new ApolloClient({
  cache,
  uri: 'http://localhost:4042/graphql',
})

WARNING

Use the @apollo/client/core import path otherwise you will also import React.

3. Create the Apollo provider

The provider holds the Apollo client instances that can then be used by all the child components.

import { createApolloProvider } from '@vue/apollo-option'

const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
})

4. Add the provider to your app

Add it to your app with the app.use function:

import { createApp, h } from 'vue'

const app = createApp({
  render: () => h(App),
})

app.use(apolloProvider)

5. Add the components to your app

import VueApolloComponents from '@vue/apollo-components'

// ...

app.use(VueApolloComponents)

You are now ready to use Apollo in your components!