Vue graphql Missing X attribute on result error

Question

New to using vue as a front end but I have vue 2.3.11 as the front end and Django 3 as the backend and using apollo through vue-cli to connect them.

I have a table called documents in the backend with just a name and an id field that I am sending through the front using graphql to display a list of the names. On the console I am getting an error Missing docList attribute on result

Vue file template for html

<template>
  <div>
    <h2>All the docs</h2>
    <ul v-for="document in docList" :key="document.id">
        <li>
            <strong>{{ document.name }}</strong>
        </li>
    </ul>
  </div>
</template>

Vue file script with the graphql query I tested the graphql query on the Django terminal and it works fine.

<script>
//Graphql query
import gql from "graphql-tag"

const docList = gql`
query docList {
    documents{
          id,
          name
    }
  }
 `;


export default {
  data() {
    return {
     docList:[],
    };
  },
  apollo: {
    docList:{
      query: docList
    },
  }
};
</script>

Here is the output in the browser:

I also looked at several of the same errors and they were naming issues or data mismatch. I tried tweaking the code but don't know what the issue is

xadm · Accepted Answer · 2020-07-23 08:13:19Z

1

const docList = gql`
  query docList {    // docList is a query name
    documents{       // 'root' of requested data tree structure
      id,
      name
    }
  }
`;

Your result starts with documents (document nodes array), not with docsList (result doesn't contain this name).

<ul v-for="document in documents" :key="document.id">

answered Jul 23, 2020 at 8:13

xadm

8,4463 gold badges17 silver badges27 bronze badges

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

1 Comment

ccsv Over a year ago

Thanks very excited that this worked. So the solution was changing docList in apollo and data sections to documents. I have been trying to figure out whats wrong for the last half hour

Collectives™ on Stack Overflow

Vue graphql Missing X attribute on result error

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related