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

Question

新使用vue作为前端，但我有vue 2.3。11作为前端，Django 3作为后端，并通过vue cli使用apollo连接它们。

我在后端有一个名为文档的表，只有一个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>

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

以下是浏览器中的输出：

我还研究了几个相同的错误，它们是命名问题或数据不匹配。我试图调整代码，但不知道是什么问题

Answer 1

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

结果以文档（文档节点数组）开头，而不是以文档列表（结果不包含此名称）开头。

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