Question

我是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>

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

有人可以指导我在这里做错什么吗？

谢谢。

Answer 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
  }`
}

Answer 2

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

将它们全部设为P后，现在一切正常。

结果缺少allposts属性

2 个答案: