Javascript 如何使用Apollo在Vue中实现工作Graphql查询？

有人能帮我处理scaphold.io的第一个问题吗

当我使用内部GraphiQL向scaphold查询以下内容时：

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>

我的组件如下所示：

{
  "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}}
从“graphql标记”导入gql
从“../../config/client”导入配置
const log=console.log
const allPrograms=gql`
查询所有程序{
观众{
所有程序{
边缘{
节点{
身份证件
名称
}
}
}
}
}
`
导出默认值{
道具：[]，
数据（）{
返回{
所有程序：“”，
}
},
//阿波罗图形
阿波罗：{
//将更新当地州的“职位”数据
//通过GraphQL查询结果
所有程序：{/似乎
vue apollo
希望在服务器发送的响应中的
data
下找到一个与您在apollo定义中设置的密钥匹配的密钥。请尝试替换

apollo: {
   allPrograms: { ... }
} 

借

你的错误会消失，但这可能不是你想要的

相反，在查询定义中添加一个
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;
            });
        }
    },
}

你试过给“所有程序”命名吗还有什么？我没有太多的Vue appolo经验，但您有一个名为allPrograms的变量和appolo属性，这可能会产生奇怪的行为。虽然没有删除错误，但由于您的建议，我现在知道是
apollo:
部分中的
allPrograms
声明导致了allProg的丢失结果错误上的rams属性。（用注释标记）。这意味着什么？我没有正确初始化或解析它吗？它工作了，我现在用返回
data.viewer.allPrograms.edges
检索json。它的形状是
[{“node”：{“id”：“UHJvZ3JhbTo2”，“name”：“Blender”，“_uutypename”：“Program”}，“uuu typename”：“programmedge”}，{“node”：{“id”：“UHJvZ3JhbTo1”，“name”：“Inkscape”，“u typename”：“Program”}，“u typename”：“programeedge”}，
。如何将其过滤为仅{“id”：…，“name”：…}？或停止过度抓取。如果有任何关于这方面的想法，我当然会奖励你。我还将获得404（未找到）错误。不确定它以前是否存在。@Code MonKy我已添加了数据的重新映射。为了避免遍历数据，您可以设置一个新的查询服务器端解析，以满足您的需要，但您必须在scaphold.io中进行挖掘，以查看如何执行该操作。至于404错误，恐怕可能是来自其他地方。谢谢，我将检查它稍后。是的，当我想要清理结果时，我必须在scaphhold的文档中进一步挖掘。我确信过度抓取的问题在那里得到了解决。无论如何，快速原型制作的好东西，一个漂亮的界面。