[英]How to implement a working Graphql query in Vue with Apollo?
有人可以帮助我让我的第一个查询与scaphold.io一起工作吗?
当我使用内部GraphiQL查询以下内容时:
query AllPrograms {
viewer {
allPrograms{
edges {
node {
id
name
}
}
}
}
}
返回看起来像这样:
{
"data": {
"viewer": {
"allPrograms": {
"edges": [
{
"node": {
"id": "UHJvZ3JhbTo2",
"name": "Blender"
}
},
{
"node": {
"id": "UHJvZ3JhbTo1",
"name": "Inkscape"
}
},
...
我的组件看起来像这样:
<template>
<md-card>
<span class="md-headline">Programma's</span>
<span class="md-headline">{{ allPrograms }}</span>
</md-card>
</template>
<script>
import gql from 'graphql-tag'
import config from '../../config/client'
const log = console.log
const allPrograms = gql `
query AllPrograms {
viewer {
allPrograms{
edges {
node {
id
name
}
}
}
}
}
`
export default {
props: [],
data () {
return {
allPrograms: '',
}
},
// Apollo GraphQL
apollo: {
// Local state 'posts' data will be updated
// by the GraphQL query result
allPrograms: { // <-- THIS allPrograms IS THE CAUSE OF THE ERROR!
// GraphQL query
query: allPrograms,
// Will update the 'loading' attribute
// +1 when a new query is loading
// -1 when a query is completed
loadingKey: 'loading',
},
}
}
</script>
我得到的错误是: 在结果上缺少allPrograms属性
我还读了一些看起来像是正确的json-result的一部分: object: viewer: {allPrograms: Object, __typename: "Viewer"}
或许我误解了一些事情。 我认为我接收数据很接近,可能已经成功了,但分裂似乎需要一些额外的关注。
有任何想法吗?
这似乎vue-apollo
预计下找到data
由服务器发送的密钥匹配你在你的阿波罗定义设置响应。 尝试更换
apollo: {
allPrograms: { ... }
}
通过
apollo: {
viewer: { ... }
}
并且你的错误消失了,但那可能不是你想要的。
而是在查询定义中添加update
选项以更改数据集。 假设您想要allPrograms
的内容:
apollo: {
allPrograms: {
query: allPrograms,
loadingKey: 'loading',
update: function(data) {
return data.viewer.allPrograms;
// or if you just want the leaf objects
return data.viewer.allPrograms.edges.map(function(edge) {
return edge.node;
});
}
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.