如何在NuxtJs中使用Graphql

vue.js Vue.js

小小老丝

2020-03-24

所以我想将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

.nu​​xt / index.js中导入 apolloProvider

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

不幸的是,这给我带来了两个问题。每次服务器重新启动时,.nu​​xt目录中的代码都会被擦除除此之外,它还给我带来以下错误:

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

第3669篇《如何在NuxtJs中使用Graphql》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
老丝 2020.03.24

也许有点晚,但是有@ nuxtjs / apollo插件。

我在使用Nuxt 1.0的博客中使用了此工具,但仍在Nuxt2上进行一些测试,但这给我带来了问题。.猜想我暂时仍将使用V1。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android