我正在通过实现模块来尝试使用vue-apollo
with 。我有一个正在运行的GraphQL服务器。我写了以下代码:nuxt
@nuxtjs/apollo
localhost: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
。