Multiple clients

You can specify multiple apollo clients if your app needs to connect to different GraphQL endpoints:

const defaultOptions = {
  // 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/graphql',
  // 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,
}

const clientAOptions = {
  // You can use `https` for secure connection (recommended in production)
  httpEndpoint: 'http://localhost:4000/graphql',
}

const clientBOptions = {
  httpEndpoint: 'http://example.org/graphql',
}

// Call this in the Vue app file
export function createProvider(options = {}) {
  const createA = createApolloClient({
    ...defaultOptions,
    ...clientAOptions,
  })

  const createB = createApolloClient({
    ...defaultOptions,
    ...clientBOptions,
  })

  const a = createA.apolloClient
  const b = createB.apolloClient

  // Create vue apollo provider
  const apolloProvider = createApolloProvider({
    clients: {
      a,
      b
    },
    defaultClient: a,
  })
}

In the component apollo option, you can define the client for all the queries, subscriptions and mutations with $client (only for this component):

export default {
  apollo: {
    $client: 'b',
  },
}

You can also specify the client in individual queries, subscriptions and mutations with the client property in the options:

export default {
  apollo: {
    tags: {
      query: gql`...`,
      client: 'b',
    }
  }
}