如何在 NuxtJs 中使用 Graphql

Question

所以我想在 NuxtJs 中实现 GraphQL。

现在我需要在根元素中添加一个提供程序，但 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

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

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

不幸的是，这给我带来了两个问题；每次服务器重新启动时，我在 .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

可能有点晚了，但是有@nuxtjs/apollo插件。

我已经在我的博客中使用了这个，使用 Nuxt 1.0，我仍在对 Nuxt2 进行一些测试，但它给我带来了一些问题。我想我会暂时坚持使用 V1。

Answer 2

.nuxt 文件夹在您每次重建项目时都会重新启动，因此它不是注入模块的理想位置。

Nuxt 有 nuxt.config.js，您可以在其中将模块添加到其模块数组中。 它们是在运行时导入的，因此请确保它们已经被转译（例如，所有 es6 转换都已处理）

docs 中提供了更好的描述

@nuxtjs/apollo 似乎是一个不错的选择，但是如果您想编写自己的 graphql 模块，这就是方式

Answer 3

到目前为止，我正在使用 [nuxt-apollo][1] "nuxt": "^2.10.2" 没有问题。

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.您需要按照上面的说明设置配置，

在 nuxt.config.js 中

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

1. 进行查询

在 gql/allCars.gql 中

{
  allCars {
    id
    make
    model
    year
  }
}

1. 在你的组件中使用 graphql 在页面/index.vue

   <script> import allCars from '~/apollo/queries/allCars' export default { apollo: { allCars: { prefetch: true, query: allCars } }, head: { title: 'Cars with Apollo' } } </script>