huyhong / apollo-module

Nuxt.js module to use Vue-Apollo

Apollo

Nuxt.js module to use vue-apollo (integrates graphql-tag loader to parse .gql & .graphql files)

Setup

Install apollo module:

npm install --save @nuxtjs/apollo

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

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

  // Give apollo module options
  apollo: {
    clientConfigs: {
      default: '~/apollo/clientConfigs/default.js'
    }
  }
}

Options

• clientConfig: Object Config passed to ApolloClient
  • default: String
  • [otherClient]: String or Object

Example (nuxt.config.js):

module.exports = {
  modules: ['@nuxtjs/apollo'],
  apollo: {
    clientConfigs: {
      default: '~/apollo/client-configs/default.js',
      test: '~/apollo/client-configs/test.js'
    }
  }
}

Then in ~/apollo/client-configs/default.js:

import { ApolloLink } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

export default (ctx) => {
  const httpLink = new HttpLink({ uri: 'http://localhost:8000/graphql' })

  // auth token
  let token = ctx.isServer ? ctx.req.session : window.__NUXT__.state.session

  // middleware
  const middlewareLink = new ApolloLink((operation, forward) => {
    operation.setContext({
      headers: { authorization: `Bearer ${token}` }
    })
    return forward(operation)
  })
  const link = middlewareLink.concat(httpLink)
  return {
    link,
    cache: new InMemoryCache()
  }
}

Usage

See Official example and vue-apollo.

Upgrade Guide apollo-client v1 => v2

Version 3 of this module is using apollo-client 2.x. You need to make sure to update all your middle/afterware according to the upgrade guide of apollo-client. Check this source for a reference: https://github.com/apollographql/apollo-client/blob/master/Upgrade.md