Recently started using vue as a frontend with vue 2.3.11 and Django 3 as the backend, connecting them through Apollo via vue-cli.
In my backend, I have a table named documents which consists of only a name and an id field. I am fetching this data from the backend through GraphQL to display a list of names. However, I encountered an error on the console stating
Missing docList attribute on resultBelow is the HTML template for the Vue file:
<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>
Here's the script section of the Vue file containing the tested GraphQL query:
<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>
This is the output displayed in the browser:
https://i.sstatic.net/l8BIi.jpg
I researched similar errors which were related to naming issues or data mismatch. Despite my attempts to modify the code, I'm still struggling to identify the root cause of the issue.