结果中缺少 allposts 属性

Posted 2023-03-08

【中文标题】结果中缺少 allposts 属性

【英文标题】：Missing allposts attribute on result

【发布时间】：2019-05-27 18:37:57

【问题描述】：

我是 Django 开发人员，所以第一次接触 vue 和 graphql，我不知道该如何处理这个错误。

这是我的代码，我的查询可能有问题，

    <template>
      <section>
        <div class="home">
          <h2>hiii</h2>
          <div v-for="i in allposts" :key="i.id">
            <ul>
              <li>
                <h3>hey</h3>
                <strong>id</strong>:
                <span>title</span>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </template>

    <script>
    import gql from "graphql-tag";

    const PostQuery = gql`
      query allposts 
        allPosts 
          id
          title
        
      
    `;

    export default 
      props: [],
      data() 
        return 
          allposts: []
        ;
      ,

      apollo: 
        allposts: PostQuery
      
    ;
    </script>

可以看到数据已经成功获取

谁能指导我在这里做错了什么？

提前致谢。

【参考方案1】：

通过 Google 来到这里。查看了解释问题以及如何解决问题的文档： https://apollo.vuejs.org/guide/apollo/queries.html#name-matching

请注意，初学者的一个常见错误是使用与查询中的字段名称不同的数据名称。

他们给出的例子：

apollo: 
  world: gql`query 
    hello
  `

world 和 hello 不匹配，因此您会收到错误消息。

名称必须匹配，或者按照文档的建议，您可以提供 update 函数：

apollo: 
  world: 
    query: gql`query 
      hello
    `,
    update: data => data.hello
  

或者，重命名 GraphQL 文档中的字段：

apollo: 
  world: gql`query 
    world: hello
  `

【参考方案2】：

好吧，结果证明这是一个愚蠢的错误，API 返回的结果有一个名为 allPosts 的键，大写 P，但我的本地数据属性和 Apollo 属性 allposts，带有一个小 p。

在把它们全部变成 P 之后，现在一切正常。

【讨论】：

谢谢！奇怪的是命名必须与查询名称匹配。