如何从Apollo中的分页列表中删除项目?
问题描述:
我想知道如何删除分页列表中的项目,以便始终显示相同数量的项目。我目前的做法不工作(名单后,每个删除变小):如何从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 })
}
})
}
答
因为你的反应是分页,客户不知道接下来的文章应该是什么 - 它取出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,
},
},
],
})
}
这将迫使阿波罗为您GET_PAGINATED_POSTS
获取新的结果,相应地更新存储和你的用户界面。