graphql - 努克斯特。尝试使用 apollo-graphql 我得到了几个我没有得到的错误

Question

我已经在 vue 中集成了 apollo-graphql（没有 nuxt）并且它有效。

但现在我正在尝试从 Nuxt 开始。在文件夹插件中，我包含了一个带有 apollo 初始化的 js 文件。

然后在一个 vue 文件中，我使用以下命令导入文件：（import '~/plugins/apollo-client'我从这里得到了这个想法：Apollo、GraphQL、Vue 和 Nuxt shenanigans）

我遇到了很多错误，比如无法使用 localStorage。为此，我安装了一个名为 npm i nuxt-storage 的包。

但随后在 split 命令处：

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  }, 
  wsLink,
  httpLink,
)

我收到此错误：Cannot read property 'request' of null

恐怕在解决这个问题后我会遇到更多错误。

我究竟做错了什么？

我应该将 main.js 中的代码放在哪里？

谢谢。

Answer 1

如果你不使用 nuxt-apollo，它应该会更好。

您得到的错误一定是由于缺少步骤。

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.
         }
       }
     }
   }
   

2. 进行查询

   在gql/allCars.gql：

   {
     allCars {
       id
       make
       model
       year
     }
   }
   

3. 在你的组件中使用 graphql

   在pages/index.vue：

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