vue-apollo config for any VueJS project

apollo-config.js

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import {createApolloClient, restartWebsockets} from 'vue-cli-plugin-apollo/graphql-client'

// Install the vue plugin
Vue.use(VueApollo)

// Name of the localStorage item
const AUTH_TOKEN = 'apollo-token'
const IMAP_TOKEN = 'apollo-imap-token'

export const tokenNames = {
  AUTH_TOKEN,
  IMAP_TOKEN
}

// Config
const defaultOptions = {
  // You can use `https` for secure connection (recommended in production)
  httpEndpoint: process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000',
  // You can use `wss` for secure connection (recommended in production)
  // Use `null` to disable subscriptions
  wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000',
  // LocalStorage token
  tokenName: AUTH_TOKEN,
  // Enable Automatic Query persisting with Apollo Engine
  persisting: false,
  // Use websockets for everything (no HTTP)
  // You need to pass a `wsEndpoint` for this to work
  websocketsOnly: false,
  // Is being rendered on the server?
  ssr: false

  // Override default http link
  // link: myLink

  // Override default cache
  // cache: myCache

  // Override the way the Authorization header is set
  // getAuth: (tokenName) => ...

  // Additional ApolloClient options
  // apollo: { ... }

  // Client local data (see apollo-link-state)
  // clientState: { resolvers: { ... }, defaults: { ... } }
}

// Call this in the Vue app file

function initApolloClient (options = {}) {
  // Create apollo client
  let currentApolloOptions = {
    ...defaultOptions,
    ...options
  }
  const {apolloClient, wsClient} = createApolloClient(currentApolloOptions)
  if (wsClient) {
    apolloClient.wsClient = wsClient
  }
  return apolloClient
}

export function createProvider (options = {}) {
  // init default client
  const defaultClient = initApolloClient()
  let imapEndpoint = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_IMAP_GQL_SERVER : 'http://localhost:4000'
  const imapClient = initApolloClient({
    httpEndpoint: imapEndpoint,
    wsEndpoint: null,
    tokenName: IMAP_TOKEN
  })

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    clients: {
      default: defaultClient,
      imap: imapClient
    },
    defaultClient,
    errorHandler (error) {
      // eslint-disable-next-line no-console
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
    }
  })

  return apollo

main.js

import {createProvider} from './vue-apollo'
(...)// other application code
const apolloProvider = createProvider()

new Vue({
  router,
  store,
  provide: apolloProvider.provide(),
  i18n,
  render: h => h(App)
}).$mount('#app')