1

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:

enter image description here

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

ccsv
  • 8,188
  • 12
  • 53
  • 97

1 Answers1

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">
xadm
  • 8,219
  • 3
  • 14
  • 25
  • 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 – ccsv Jul 23 '20 at 08:45