How to implement a working Graphql query in Vue with Apollo?

Question

Could someone please help me in getting my first queries working with scaphold.io?

When I query the following to my scaphold, using the internal GraphiQL:

query AllPrograms {
  viewer {
    allPrograms{
      edges {
        node {
          id
          name
        }
      }
    }
  }
}

The return looks like this:

{
  "data": {
    "viewer": {
      "allPrograms": {
        "edges": [
          {
            "node": {
              "id": "UHJvZ3JhbTo2",
              "name": "Blender"
            }
          },
          {
            "node": {
              "id": "UHJvZ3JhbTo1",
              "name": "Inkscape"
            }
          },

          ...

My component looks like this:

<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>

The error I get says: Missing allPrograms attribute on result

And I also read something that looks like it is part of the correct json-result: object: viewer: {allPrograms: Object, __typename: "Viewer"}

Or maybe I am misunderstanding something. I think I am close in receiving the data, might have even succeeded already, but the splitting up seems to need some extra care.

Any ideas?

Answer 1

It seems vue-apollo expects to find under data in the response sent by the server a key matching what you set in your apollo definition. Try replacing

apollo: {
   allPrograms: { ... }
} 

by

apollo: {
   viewer: { ... }
} 

and your error goes away, but that's probably not what you want.

Instead, add an update option to your query definition to alter the data set. Assuming you want the content of 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;
            });
        }
    },
}