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

Question

刚开始使用 vue 作为前端，但我有 vue 2.3.11 作为前端，Django 3 作为后端，并通过 vue-cli 使用 apollo 来连接它们。

我在后端有一个名为documents 的表，其中只有一个name 和一个id 字段，我使用graphql 通过前端发送来显示名称列表。在控制台上我收到一个错误Missing docList attribute on result

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

这是浏览器中的输出：

我还查看了几个相同的错误，它们是 naming issues 或 data mismatch。我尝试调整代码，但不知道问题是什么

Answer 1

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

您的结果以documents（文档节点数组）开头，而不是docsList（结果不包含此名称）。

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