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:

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. (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. (server-bundle.js:1401:65)
    at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0)
    at server-bundle.js:95:18
    at Object. (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. (/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

user_1623563 · Answer

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.

user_14516830 · Answer

.nuxt folder restarts every time you rebuild the project, so it would not be the ideal place to inject your module.

Nuxt has nuxt.config.js where you can add your modules to its module array. they are imported at runtime so make sure they are already transpiled (eg. all the es6 conversions are taken care off)

better description is available in the docs

@nuxtjs/apollo seems like a good option, however if you want to write your own graphql module, this is the way

user_10669659 · Answer

I'm using [nuxt-apollo][1] "nuxt": "^2.10.2" without issues so far.

npm i @nuxtjs/apollo &&
npm install --save @nuxtjs/apollo
# if you are using *.gql or *.graphql files add graphql-tag to your dependencies 
npm install --save graphql-tag

1.Youll need to set up your config as you've stated above,

In nuxt.config.js

    export default {
      ...
      modules: ['@nuxtjs/apollo'],
      apollo: {
        clientConfigs: {
          default: {
            httpEndpoint: 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu' //link to your graphql backend.
          }
        }
      }
    }

Make your query

in gql/allCars.gql

{
  allCars {
    id
    make
    model
    year
  }
}

use graphql in your component in pages /index.vue

How to use Graphql in NuxtJs

3 Answers