2. Installation

Add the plugin to the project:

npm install --save @nuxtjs/apollo

or

yarn add @nuxtjs/apollo

If you are using *.gql or *.graphql files add graphql-tag to your dependencies

npm install --save graphql-tag

or

yarn add graphql-tag

Add @nuxtjs/apollo to modules section of nuxt.config.js

- clientConfigs: `Object` Config passed to ApolloClient
  - default: `Object` // keep in mind that the object will be stringified!
  # alternative
  - default: `Path` // use this to have more control over the options
  - otherClient: `Object` (Optional)

{
  // Add apollo module
  modules: ['@nuxtjs/apollo'],

  // Give apollo module options
  apollo: {
    tokenName: 'yourApolloTokenName', // optional, default: apollo-token
    cookieAttributes: {
      /**
        * Define when the cookie will be removed. Value can be a Number
        * which will be interpreted as days from time of creation or a
        * Date instance. If omitted, the cookie becomes a session cookie.
        */
      expires: 7, // optional, default: 7 (days)

      /**
        * Define the path where the cookie is available. Defaults to '/'
        */
      path: '/', // optional
      /**
        * Define the domain where the cookie is available. Defaults to
        * the domain of the page where the cookie was created.
        */
      domain: 'example.com', // optional

      /**
        * A Boolean indicating if the cookie transmission requires a
        * secure protocol (https). Defaults to false.
        */
      secure: false,
    },
    includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
    authenticationType: 'Basic', // optional, default: 'Bearer'
    // (Optional) Default 'apollo' definition
    defaultOptions: {
      // See 'apollo' definition
      // For example: default query options
      $query: {
        loadingKey: 'loading',
        fetchPolicy: 'cache-and-network',
      },
    },
    // optional error handler
    errorHandler: '~/plugins/apollo-error-handler.js',
    // required
    clientConfigs: {
      default: {
        // URL to the HTTP API
        httpEndpoint: 'http://localhost:5000',
        // Url to the Websocket API
        wsEndpoint: null,
        // Token used in localstorage
        tokenName: 'apollo-token',
        // Enable this if you use Query persisting with Apollo Engine
        persisting: false,
        // Only use Websocket for all requests (including queries and mutations)
        websocketsOnly: false,
        // Custom starting link.
        // If you want to replace the default HttpLink, set `defaultHttpLink` to false
        link: null,
        // If true, add the default HttpLink.
        // Disable it if you want to replace it with a terminating link using `link` option.
        defaultHttpLink: true,
        // Options for the default HttpLink
        httpLinkOptions: {},
        // Custom Apollo cache implementation (default is apollo-cache-inmemory)
        cache: null,
        // Options for the default cache
        inMemoryCacheOptions: {},
        // Additional Apollo client options
        apollo: {},
        // apollo-link-state options
        clientState: null,
        // Function returning Authorization header token
        getAuth: defaultGetAuth,
      },
      apolloClient2: {
        httpEndpoint: 'http://localhost:5000',
        wsEndpoint: 'ws://localhost:5000',
        tokenName: 'apollo-token'
      },
      // alternative: user path to config which returns exact same config options
      apolloClient3: '~/plugins/my-alternative-apollo-config.js'
    }
  }
}

// plugins/apollo-error-handler.js
export default (error, context) => {
  console.log(error)
  context.error({ statusCode: 304, message: 'Server error' })
}

// plugins/my-alternative-apollo-config.js
export default function(context){
  return {
    // URL to the HTTP API
    httpEndpoint: 'http://localhost:5000',
    // Url to the Websocket API
    wsEndpoint: null,
    // Token used in localstorage
    tokenName: 'apollo-token',
    // Enable this if you use Query persisting with Apollo Engine
    persisting: false,
    // Only use Websocket for all requests (including queries and mutations)
    websocketsOnly: false,
    // Custom starting link.
    // If you want to replace the default HttpLink, set `defaultHttpLink` to false
    link: null,
    // If true, add the default HttpLink.
    // Disable it if you want to replace it with a terminating link using `link` option.
    defaultHttpLink: true,
    // Options for the default HttpLink
    httpLinkOptions: {},
    // Custom Apollo cache implementation (default is apollo-cache-inmemory)
    cache: null,
    // Options for the default cache
    inMemoryCacheOptions: {},
    // Additional Apollo client options
    apollo: {},
    // apollo-link-state options
    clientState: null,
    // Function returning Authorization header token
    getAuth: defaultGetAuth,
  }
}

The default getAuth function

function <%= key %>GetAuth () {
   let token
   if(process.server){
      const cookies = cookie.parse((req && req.headers.cookie) || '')
      token = cookies[<%= key %>TokenName]
    } else {
      token = jsCookie.get(<%= key %>TokenName, <%= key %>CookieAttributes)
    }
    return token && <%= key %>ClientConfig.validateToken(token) ? AUTH_TYPE + token : ''
}