Javascript Vue graphql在结果错误时缺少X属性

使用vue作为前端的新手，但我使用vue 2.3.11作为前端，Django 3作为后端，并通过vue cli使用apollo连接它们

我在后端有一个名为

documents

的表，其中只有一个

name

和一个

id

字段，我使用graphql通过前端发送该字段以显示名称列表。在控制台上，我得到一个错误，结果中缺少docList属性

html的Vue文件模板

<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>

所有的文件


{{document.name}

带有graphql查询的Vue文件脚本我在Django终端上测试了graphql查询，效果很好

<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>

//Graphql查询
从“graphql标记”导入gql
常量docList=gql`
查询文档列表{
文件{
身份证件
名称
}
}
`;
导出默认值{
数据（）{
返回{
文件清单：[]，
};
},
阿波罗：{
文件清单：{
查询：docList
},
}
};

以下是浏览器中的输出：

我还研究了几个相同的错误，它们是或。我试图调整代码，但不知道问题出在哪里

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

结果以

文档

（文档节点数组）开头，而不是以

文档列表

（结果不包含此名称）开头

非常感谢您的支持，非常激动。因此，解决方案是将阿波罗和数据部分中的

docList

更改为

documents

。在过去的半个小时里，我一直在想到底出了什么问题

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