CODEWITHSUNDEEP
javascriptvue.jsgraphqlapollovue-apollo
Code-MonKy
Code-MonKy

Reputation: 2086

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

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?

Upvotes: 5

Views: 2348

Answers (1)

nikoshr
nikoshr

Reputation: 33344

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

Upvotes: 6

Related Questions