用途:面向使用 Relay 与 GraphQL 的前端项目,帮助实现基于游标的分页,高效加载和展示大数据集,支持无限滚动与“加载更多”等交互模式。
主要能力:遵循 GraphQL Cursor Connections 规范,通过 usePaginationFragment 声明式分页,自动更新缓存并管理 connection。资料覆盖的模式包括:基础分页、无限滚动(IntersectionObserver 触发)、双向分页(loadNext/loadPrevious)、带筛选的分页、带搜索的分页、乐观更新(@prependEdge 与 ConnectionHandler.getConnectionID)、分页标签页、结合 @tanstack/react-virtual 的虚拟滚动、分页状态管理,以及自定义 usePagination Hook。
使用方式:在 schema 中定义 Connection、Edge、PageInfo 类型;在 fragment 上使用 @refetchable 与 @connection,并通过 @argumentDefinitions 声明 first、after 等参数;组件中调用 usePaginationFragment 获取 data、loadNext、loadPrevious、hasNext、hasPrevious、isLoadingNext、refetch 等。筛选或搜索变化时用 refetch 重置分页。
适用场景:React + Relay 应用中的列表、信息流、搜索结果、标签页列表等需要增量加载的场景。
限制:资料未提供安装命令、依赖版本、服务端实现细节、性能数据与收费信息,暂未提供。