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

时间:2017-10-07 21:56:18

标签: pagination graphql apollo vue-apollo

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

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 })
    }
  })
}

1 个答案:

答案 0 :(得分:0)

由于您的回复是分页的,客户端不知道下一篇文章应该是什么 - 它使用初始查询获取了10个帖子,以便您的商店中有什么内容。

不应使用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获取新结果,并相应地更新商店和您的用户界面。