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

Posted 2023-03-10

【中文标题】Vue graphql 结果错误时缺少 X 属性

【英文标题】：Vue graphql Missing X attribute on result error

【发布时间】：2020-11-12 20:53:25

【问题描述】：

刚开始使用 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。我尝试调整代码，但不知道问题是什么

【参考方案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">

【讨论】：

非常感谢这工作。所以解决方案是将阿波罗和数据部分中的docList 更改为documents。在过去的半个小时里，我一直在试图找出问题所在