如何在NuxtJs中使用Graphql

Question

所以我想将GraphQL实现到NuxtJs中。

现在我需要在根元素中有一个提供者，但NuxtJs不会给我这个选项。

我将如何将apolloProvider注入根Vue元素？

我试图做到：

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

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

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

我已经试过什么：

创建插件：/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 

在导入的apolloProvider .nuxt/index.js：

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

不幸的是这使我有2个问题;每次服务器重新启动时，我的.nuxt目录中的代码被擦除。此外，它给我下面的错误：

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

阿波罗新Nuxt模块可供选择：https://github.com/nuxt-community/apollo-module

和检查的官方例如用于阿波罗此Nuxt模块：https://github.com/nuxt/nuxt.js/tree/dev/examples/vue-apollo