中继分页 - 更改光标后从存储中删除旧节点

问题描述

我使用 pagination container 实现了分页系统。它可以很好地解决一个问题。

当我调用 loadMore 函数来获取新节点时，中继从服务器获取节点并添加到旧节点。但我想删除旧节点，只想显示新节点。

例如 $first = 10

当页面第一次加载时，我得到了 10 个节点，loadMore 之后我得到了 20 个节点。但我只想显示新获取的 10 个节点。

我用过这个pagination example

我找不到在 loadMore 操作后删除旧节点的方法。

我知道中继分页只打算使用无限滚动，我只是想知道也许有办法解决这个问题。

解决方法

Hacky/easy 解决方案是始终映射最后 10 个项目。

另一种解决方案是使用 ConnectionHandler 检查中继存储并手动从存储中删除您不想要的边。

查看 https://relay.dev/docs/en/relay-store 中的 deleteNode 以了解有关如何使用中继存储的更多信息。

更好的解决方案是创建一个可重新获取的容器并使用游标分页，这样每次通过设置游标和连接上的参数来获取接下来的 10 个项目时。这样您就必须查询 pageInfo 并手动检查是否有 hasNextPage。

通过这种方式，您还可以进行双向分页（向前和向后分页）。

关于基于光标的分页的更多信息：

https://relay.dev/graphql/connections.htm

https://graphql.org/learn/pagination/