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?

Did you try naming "allPrograms" something else? I don't have much Vue-appolo experience but you have a variable and an appolo property named allPrograms, which may make a weird behavior. — Antony
– Antony, Commented Jan 18, 2018 at 18:41
Doesn't remove the error, but thanks to your suggestion I now know that it's the declaration of allPrograms in the apollo: part that is the cause of the Missing allPrograms attribute on result error. (Marked it with a comment.) What does this mean? Am I not initialising or resolving it correctly? — Code-MonKy
– Code-MonKy, Commented Jan 19, 2018 at 9:57

nikoshr · Accepted Answer · 2018-01-22 17:05:58Z

6

+50

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

edited Jan 22, 2018 at 17:05

answered Jan 19, 2018 at 11:00

nikoshr

33.4k34 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Code-MonKy Over a year ago

It works, I retrieve json now with return data.viewer.allPrograms.edges. The shape of it is

[ { "node": { "id": "UHJvZ3JhbTo2", "name": "Blender", "__typename": "Program" }, "__typename": "ProgramEdge" }, { "node": { "id": "UHJvZ3JhbTo1", "name": "Inkscape", "__typename": "Program" }, "__typename": "ProgramEdge" }, ...

. How to filter it down to only {"id": ..., "name": ...}? Or stop overfetching. Any ideas for that would be welcome, I'll award you the bounty of course.

Code-MonKy Over a year ago

I am also getting a 404 (Not Found) error. Not sure if it was there before.

nikoshr Over a year ago

@Code-MonKy I've added a remapping of the data. To avoid traversing the data, you could setup a new query server-side resolving to just what you want but you'll have to dig in scaphold.io to see how you can do that. As for the 404 error, I'm afraid that's probably from somewhere else.

Code-MonKy Over a year ago

Thanks I'll check it out later. Yep, I'll have to dig a little further in scaphold's docs when I want to clean up the result. I am sure the over-fetching is addressed there. Anyway, good stuff for fast prototyping for a beautiful interface.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related