javascript - Apollo を使用して Vue で動作する Graphql クエリを実装する方法は?

Question

誰かが私の最初のクエリを 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>

私が得るエラーは言う：結果にallPrograms属性がありません

また、正しい json-result の一部のように見えるものも読みました。object: viewer: {allPrograms: Object, __typename: "Viewer"}

あるいは、私が何かを誤解しているのかもしれません。データの受信に近づいていると思います。すでに成功している可能性もありますが、分割には特別な注意が必要なようです。

何か案は？