【问题标题】:Vue Apollo "__typename" is undefined in updateQueryVue Apollo“__typename”在 updateQuery 中未定义
【发布时间】:2020-08-06 18:36:22
【问题描述】:

我正在尝试为我的帖子索引创建一个“显示更多”按钮。前 5 个帖子的索引查询加载良好,当我单击“显示更多”按钮时,我可以看到返回的新帖子,但是我收到了一堆错误,例如:

Missing field id in {
  "__typename": "Post",
  "posts": [
    {
      "id": "5f2b26600c3ec47b279d8988",
      "title": 

对于每个帖子属性(id、标题、内容、slug 等),我几乎都会收到其中一个错误。这可以防止将实际的新帖子添加到索引中。是什么导致了这个问题?

<script>

  import postsQuery from '~/apollo/queries/blog/posts';

  const pageSize = 5;

  export default {
    name: 'BlogIndex',

    data: () => ({
      loadingMorePosts: false,
      page: 0,
      pageSize,
    }),

    apollo: {
      postsCount: {
        prefetch: true,
        query: postsQuery,
        variables: {
          page: 0,
          pageSize,
        }
      },
      posts: {
        prefetch: true,
        query: postsQuery,
        variables: {
          page: 0,
          pageSize,
        }
      },
    },

    computed: {
      morePosts() {
        return this.posts.length < this.postsCount.aggregate.totalCount;
      }
    },

    methods: {
      async fetchMorePosts() {
        this.page += this.pageSize;

        this.$apollo.queries.posts.fetchMore({
          variables: {
            page: this.page,
            pageSize,
          },
          updateQuery: (previousResult, { fetchMoreResult }) => {
            const newPosts = fetchMoreResult.posts;
            console.log('typename: ', previousResult.posts.__typename); <--- returns undefined

            if (!newPosts.length) return previousResult;

            return {
              posts: {
                __typename: previousResult.posts.__typename,
                posts: [...previousResult.posts, ...newPosts],
              }
            }
          }
        })
      },
    },
  }
</script>

更新:添加了导入的帖子查询

query Posts($page: Int!, $pageSize: Int!) {
  posts(
    start: $page
    limit: $pageSize
    sort: "published_at:desc"
    where: { published: true }
  ) {
    id
    title
    content
    slug
    published
    createdAt
    updatedAt
    published_at
  }
  postsCount: postsConnection(where: { published: true }) {
    aggregate {
      totalCount
    }
  }
}

【问题讨论】:

  • 可以分享导入的postsQuery
  • 我知道我忘记了什么!将其添加到原始帖子中。

标签: vue.js graphql strapi vue-apollo


【解决方案1】:

我认为问题出在这里:

            return {
              posts: {
                __typename: previousResult.posts.__typename,
                posts: [...previousResult.posts, ...newPosts],
              }
            }

我很确定__typename 应该属于每个帖子对象,而不是帖子集合的一部分。让我知道如果这样的事情可以解决它:

            return {
              posts: {
                posts: [...previousResult.posts, ...newPosts]
              }
            }

并将查询更改为:

query Posts($page: Int!, $pageSize: Int!) {
  posts(
    start: $page
    limit: $pageSize
    sort: "published_at:desc"
    where: { published: true }
  ) {
    __typename    // add this here
    id
    title
    content
    slug
    published
    createdAt
    updatedAt
    published_at
  }
  postsCount: postsConnection(where: { published: true }) {
    aggregate {
      totalCount
    }
  }
}

【讨论】:

  • 嗯,这似乎不起作用,但是像这样写回报似乎确实有效! return {posts: [...previousResult.posts, ...newPosts], postsCount: fetchMoreResult.postsCount}
  • 你为什么不直接回来? [...previousResult.posts, ...newPosts](我从未使用过 vue-apollo)
  • 我不完全确定。我知道当我只是返回帖子数组时,我会再次收到那些缺少的字段错误。
猜你喜欢
  • 2018-06-09
  • 2020-12-20
  • 2021-07-11
  • 2020-02-03
  • 2021-01-11
  • 2022-06-16
  • 2017-03-05
  • 2020-02-02
  • 2020-01-16
相关资源
最近更新 更多