结果中缺少 allposts 属性答案

【问题标题】：Missing allposts attribute on result结果中缺少 allposts 属性
【发布时间】：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>

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

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

提前致谢。

【问题讨论】：

标签： vue.js vuejs2 graphql apollo

【解决方案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 之后，现在一切正常。

【讨论】：

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