Question

我正在通过实施vue-apollo模块尝试将nuxt与@nuxtjs/apollo一起使用。我在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
  }
}

client-config：

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()
  }
}

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

我也尝试过：

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

prefetch选项的所有变体。

Answer 1

好的，所以我今天安装了一个新版本的nuxt启动程序模板，只迁移了必需品以使apollo工作。它立即起作用。我不知道导致错误的原因是什么，因为我已经安装了十几个包，我们可能永远不会知道。

Vue-apollo不会填充数据对象

1 个答案: