首页 文章

如何使用Apollo在Vue中实现有效的Graphql查询？

提问于
浏览 次
2

有人可以帮助我让我的第一个查询与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>

我得到的错误说： Missing allPrograms attribute on result

我还阅读了一些看起来像是正确的json结果的一部分： object: viewer: {allPrograms: Object, __typename: "Viewer"}

或许我误解了一些事情 . 我认为我接收数据很接近，甚至可能已经成功，但分裂似乎需要一些额外的关注 .

有任何想法吗？

javascript vue.js graphql apollo vue-apollo

1 回答

  • 2

    似乎 vue-apollo 期望在服务器发送的响应中找到 data 与您在apollo定义中设置的密钥相匹配的密钥 . 尝试更换

    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;
            });
        }
    },
}
    回复于

相关问题