2

我正在通过实现模块来尝试使用vue-apollowith 。我有一个正在运行的GraphQL服务器。我写了以下代码：nuxt@nuxtjs/apollolocalhost:4000

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

东西.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()
  }
}

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

我也试过：

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

以及选项的所有变化prefetch。

4

1 回答 1

1

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

于 2018-05-15T06:50:27.057 回答