Vue-apollo 不填充数据对象

Question

我正在尝试通过实施 @nuxtjs/apollo 模块将 vue-apollo 与 nuxt 结合使用。我在 localhost:4000 上有一个可用的 GraphQL 服务器运行。我写了以下代码：

<template>
  <div>
    <p v-for = "item in stuff" :key="item.id">item.name</p> 
  </div>

</template>

<script>
import stuff from '~/apollo/queries/stuff'

export default {
  apollo: {
    stuff: {
      query: stuff,
      variables: {
        limit: 10
      }
    }
  },
  data () {
    return {
      stuff: []
    }
  }
}
</script>

stuff.gql :

{
  stuff {
    id
    name
  }
}

客户端配置：

import { ApolloLink } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

export default (ctx) => {
  const httpLink = new HttpLink({ uri: 'http://localhost:4000' })


  // middleware
  const middlewareLink = new ApolloLink((operation, forward) => {
    const token = process.server ? ctx.req.session : window.__NUXT__.state.session

    operation.setContext({
      headers: { authorization: `Bearer ${token}` }
    })
    return forward(operation)
  })
  const link = middlewareLink.concat(httpLink)
  return {
    link,
    cache: new InMemoryCache()
  }
}

细心的reader会发现我基本上是从文档中复制示例代码。我期望发生的是我的 vue 组件的数据对象将使用来自我的后端的前 10 个结果进行更新。但是，我在 $apolloData 对象中看到了无法从组件访问的所有内容。此外，数据不限于前 10 个条目。有人可以指出我做错了什么吗？因为我看不到它。

我也试过了:

apollo: {
  products: {
    query: stuff,
    variables () {
      return {
         limit: 10
      }
    }
  }
}

以及 prefetch 选项的所有变体。

Answer 1

好的，所以我今天安装了一个新版本的 nuxt 入门模板，并且只迁移了让 apollo 工作的必需品。它立即起作用。我不知道是什么导致了错误，而且由于我已经安装了十几个软件包，我们可能永远不会知道。

Vue-apollo 不填充数据对象

Vue-apollo doesn't populate data object

vue.js

graphql

nuxt.js

vue-apollo