How to use Graphql in NuxtJs

Question

So I want to implement GraphQL into NuxtJs.

Now I need to have a provider into the root element, but NuxtJs doesn't give me this option.

How would I inject the apolloProvider into the root Vue element?

What I'm trying to accomplish:

https://github.com/Akryum/vue-apollo

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

new Vue({
  el: '#app',
  apolloProvider,
  render: h => h(App),
})

What I've tried:

Creating a plugin: /plugins/graphql.js:

import Vue from 'vue'
import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
import VueApollo from 'vue-apollo'

// Create the apollo client
const apolloClient = new ApolloClient({
  networkInterface: createBatchingNetworkInterface({
    uri: 'http://localhost:3000/graphql'
  }),
  connectToDevTools: true
})

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

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

export default apolloProvider

Importing the apolloProvider in .nuxt/index.js:

...
import apolloProvider from '../plugins/graphql'
...
  let app = {
    router,
    store,
    apolloProvider,
    _nuxt: {
      defaultTransition: defaultTransition,
      transitions: [ defaultTransition ],
...

Unfortunately this provides me with 2 problems; each time the server restarts, my code in the .nuxt directory is wiped. Besides that it gives me the following error:

TypeError: Cannot set property '__APOLLO_CLIENT__' of undefined
    at new ApolloClient (/current/project-nuxt/node_modules/apollo-client/src/ApolloClient.js:112:37)
    at Object.<anonymous> (plugins/graphql.js:6:21)
    at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
    at Object.module.exports.__webpack_exports__.a (server-bundle.js:1060:76)
    at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
    at Object.<anonymous> (server-bundle.js:1401:65)
    at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
    at server-bundle.js:95:18
    at Object.<anonymous> (server-bundle.js:98:10)
    at evaluateModule (/current/project-nuxt/node_modules/vue-server-renderer/build.js:5820:21)
    at /current/project-nuxt/node_modules/vue-server-renderer/build.js:5878:18
    at /current/project-nuxt/node_modules/vue-server-renderer/build.js:5870:14
    at Nuxt.renderToString (/current/project-nuxt/node_modules/vue-server-renderer/build.js:6022:9)
    at P (/current/ducklease-nuxt/node_modules/pify/index.js:49:6)
    at Nuxt.<anonymous> (/current/project-nuxt/node_modules/pify/index.js:11:9)
    at Nuxt.ret [as renderToString] (/current/project-nuxt/node_modules/pify/index.js:72:32)
    at Nuxt._callee2$ (/current/project-nuxt/node_modules/nuxt/dist/webpack:/lib/render.js:120:24)
    at tryCatch (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:65:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:303:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/current/project-nuxt/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /current/project-nuxt/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

Answer 1

Maybe a little late, but there is @nuxtjs/apollo plugin.

I've used this for my blog, using Nuxt 1.0, I'm still doing some testing on Nuxt2, but its giving me issues.. guess I'll stick with V1 for the moment.