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

Posted 2023-03-10

【中文标题】如何从 Apollo 的分页列表中删除项目？

【英文标题】：How to delete items from a paginated list in Apollo?

【发布时间】：2018-03-19 10:15:04

【问题描述】：

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

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】：

由于您的回复是分页的，因此客户不知道下一个帖子应该是什么 - 它使用初始查询获取了 10 个帖子，所以这就是您商店中的内容。

您应该使用refetchQueries，而不是使用update 手动更新缓存：

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。

【讨论】：

这可能是唯一可行的方法，但这对我来说似乎非常不理想......如果只是因为像 optimisticResponse 这样的东西不能被使用，服务器必须被无谓地击中，一切都很慢......肯定有办法直接更新缓存并删除已删除的对象。

我们可以举一个cursors的例子来进行分页。例如，如果我们正在使用类似 gmail 的应用程序并且我们在第 3 页。如果我们从列表中删除任何项目，我们需要重新获取该特定列表的数据。

在基于光标的分页中，我们发送光标，之前/之后和最后/第一个参数。在 gmail 之类的应用程序中。我们在第三页，我们删除任何电子邮件。我们需要重新获取第三页的数据。所以我们需要先发送光标，然后发送。当我们在第三页时，我们只有第三页的光标。因此，如果我们发送顶部项目的光标。它将被从后端排除。因为查询假设在游标之后返回数据。另一种情况是，如果我们在只有一条记录的最后一页。如果我们删除该记录页，则应切换到具有新计数和页码的倒数第二页。