nuxt-community/apollo-module

Name: apollo-module

Owner: Nuxt Community

Description: Nuxt.js module to use Vue-Apollo

Created: 2017-07-27 14:13:46.0

Updated: 2018-01-18 14:27:48.0

Pushed: 2018-01-17 12:17:59.0

Homepage: null

Size: 46

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Apollo

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

Setup

Install apollo module:

install --save @nuxtjs/apollo

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

 Add apollo module
dules: ['@nuxtjs/apollo'],

 Give apollo module options
ollo: {
clientConfigs: {
  default: '~/apollo/client-configs/default.js'
}

Options

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

Example (nuxt.config.js):

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

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

Example without subscription

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

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

 auth token
t token = process.server ? ctx.req.session : window.__NUXT__.state.session

 middleware
nst middlewareLink = new ApolloLink((operation, forward) => {
operation.setContext({
  headers: { authorization: `Bearer ${token}` }
})
return forward(operation)

nst link = middlewareLink.concat(httpLink)
turn {
link,
cache: new InMemoryCache()

Example with subscription (graph.cool as example)

rt { ApolloLink, concat, split } from 'apollo-link'
rt { HttpLink } from 'apollo-link-http'
rt { InMemoryCache } from 'apollo-cache-inmemory'
rt { WebSocketLink } from 'apollo-link-ws'
rt { getMainDefinition } from 'apollo-utilities'
rt 'subscriptions-transport-ws' // this is the default of apollo-link-ws

rt default (ctx) => {
nst httpLink = new HttpLink({uri: 'https://api.graph.cool/simple/v1/' + process.env.GRAPHQL_ALIAS})
nst authMiddleware = new ApolloLink((operation, forward) => {
const token = process.server ? ctx.req.session : window.__NUXT__.state.session
operation.setContext({
  headers: {
    Authorization: token ? `Bearer ${token}` : null
  }
})
return forward(operation)

 Set up subscription
nst wsLink = new WebSocketLink({
uri: `wss://subscriptions.graph.cool/v1/${process.env.GRAPHQL_ALIAS}`,
options: {
  reconnect: true,
  connectionParams: () => {
    const token = process.server ? ctx.req.session : window.__NUXT__.state.session
    return {
      Authorization: token ? `Bearer ${token}` : null
    }
  }
}


nst link = split(
({query}) => {
  const {kind, operation} = getMainDefinition(query)
  return kind === 'OperationDefinition' && operation === 'subscription'
},
wsLink,
httpLink


turn {
link: concat(authMiddleware, link),
cache: new InMemoryCache()

Usage

See Official example and vue-apollo.

Examples to access the defaultClient of your apolloProvider Vuex actions

rt default {
tions: {
foo (store, payload) {
  let client = this.app.apolloProvider.defaultClient
}

ayncData/fetch method of page component

rt default {
yncData (context) {
let client = context.app.apolloProvider.defaultClient

onServerInit

rt default {
xtServerInit (store, context) {
let client = context.app.apolloProvider.defaultClient

access client or call mutations of any method inside of component

rt default {
thods:{
foo(){
  // receive the associated Apollo client 
  const client = this.$apollo.getClient()

  // most likely you would call mutations like following:
  this.$apollo.mutate({mutation, variables})
}

query on any component

rt default {
ollo: {
foo: {
  query: fooGql,
  variables () {
    return {
      myVar: this.myVar
    }
  }
}

Upgrade

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

Adjust dependencies of package.json

As this package is not taking care of your apollo-link endpoints. Please make sure you add these to your package.json. Most of you will end up adding these packages:

• apollo-link-http
• graphql
• graphql-tag (important if you use *.gql files)

In case of subscriptions:

• apollo-link-ws
• apollo-utilities
• subscriptions-transport-ws

You can add them with one command:

install --save apollo-link-http graphql graphql-tag apollo-link-ws apollo-utilities subscriptions-transport-ws