如何从 Apollo 的分页列表中删除项目？

Question

我想知道如何删除分页列表中的项目，以便始终显示相同数量的项目。我目前的方法不起作用（每次删除后列表变小）：

const GET_PAGINATED_POSTS = gql`
  query postsBySize($page: Int!, $pageSize: Int!) {
    postsPage(page: $page, size: $pageSize) {
      _id
      title
    }
  }
`;

deletePost() {
  this.$apollo.mutate({
    mutation: DELETE_POST,
    variables: {
      postId: this.post._id,
      commentIds: this.post.comments.map(x => x._id)
    },
    update: (cache, { data: { deletePost } }) => {
      const query = {
        query: GET_PAGINATED_POSTS,
        variables: {
          page: 0,
          pageSize: 10
        },
      };

      const data = cache.readQuery({ ...query });
      data.postsPage = data.postsPage.filter(post => post._id != this.post._id)
      cache.writeQuery({ ...query, data })
    }
  })
}

Answer 1

由于您的响应是分页的，客户不知道下一个 post 应该是什么——它在初始查询中获取了 10 post 秒，所以这就是您商店中的内容。

与其使用 update 手动更新缓存，不如使用 refetchQueries:

deletePost() {
  this.$apollo.mutate({
    mutation: DELETE_POST,
    variables: {
      postId: this.post._id,
      commentIds: this.post.comments.map(x => x._id)
    },
    refetchQueries: [
      {
        query: GET_PAGINATED_POSTS,
        variables: {
          page: 0,
          pageSize: 10,
        },
      },
    ],
  })
}

这将强制 Apollo 为您的 GET_PAGINATED_POSTS 获取新结果，相应地更新商店和您的 UI。

如何从 Apollo 的分页列表中删除项目？

How to delete items from a paginated list in Apollo?

pagination

graphql

apollo

vue-apollo