基于游标Relay分页：如何实现列表中间位置直接跳转？

Relay的Connection分页规范本身就支持定向请求任意位置的数据片段，核心是利用after/before游标参数结合first/last来直接拉取目标区域的数据，不用逐步加载中间项。下面是具体实现步骤：

1. 后端支持用目标标识或位置获取对应游标 #

要跳转到中间位置，首先得拿到目标位置的游标（Cursor），后端需要提供两种方式之一：

• 通过唯一ID获取游标：新增一个查询字段，比如getCursorForItem(id: ID!): String，传入目标项的ID就能返回它在分页列表中的游标。
• 通过偏移或锚点获取游标：如果是按页码/位置跳转，后端可以预生成关键锚点的游标（比如每100条存一个），或者支持根据偏移计算对应游标（需保证游标是稳定的，比如基于ID或时间戳生成）。

2. 前端发起定向分页请求 #

拿到目标游标后，用Relay的fetchQuery或useLazyLoadQuery直接请求该游标前后的数据片段，而不是从开头/末尾逐步加载：

// 示例：获取目标游标后请求前后20条数据
const itemsAroundCursorQuery = graphql`
  query ItemsAroundCursorQuery($after: String!, $first: Int!, $last: Int!) {
    itemsConnection(after: $after, first: $first, before: $after, last: $last) {
      edges {
        cursor
        node {
          id
          title
        }
      }
      pageInfo {
        hasNextPage
        hasPreviousPage
      }
    }
  }
`;

// 假设已经拿到targetCursor，请求前后各10条，共20条
const { itemsConnection } = await fetchQuery(
  environment,
  itemsAroundCursorQuery,
  { after: targetCursor, first: 10, last: 10 }
).toPromise();

3. 结合虚拟列表实现窗口化渲染 #

用虚拟列表组件（如react-window）管理已加载的数据片段，不需要把所有数据都渲染到DOM中：

• 维护一个全局的loadedEdges数组，存储所有已加载的edge（包含cursor和node），按cursor排序。
• 虚拟列表根据当前滚动位置，只渲染可见区域的项，当滚动到未加载的区域时，再用对应的游标请求新的数据片段。
• 用户跳转时，直接将虚拟列表的滚动位置定位到目标项的位置，同时加载该区域的片段。

4. 缓存与重复请求处理 #

Relay会自动根据查询参数和游标缓存分页数据，所以重复访问同一位置不会重复发起请求。同时可以通过pageInfo中的hasNextPage/hasPreviousPage判断是否需要继续加载更多数据。

关键注意点 #

• 后端必须严格遵循Relay Connection规范：确保返回的edges包含cursor字段，pageInfo提供正确的分页状态。
• 游标必须稳定：不能用临时的偏移量作为游标，要基于项的唯一标识（如ID）或不变的属性（如创建时间戳）生成，保证刷新后游标仍有效。
• 预加载优化：跳转时可以多加载目标位置前后的几条数据，避免用户滚动时频繁触发加载。

内容的提问来源于stack exchange，提问作者Fez Vrasta