如何从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

因为你的反应是分页，客户不知道接下来的文章应该是什么 - 它取出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获取新的结果，相应地更新存储和你的用户界面。