如何在Supabase/GraphQL中实现分页？查询总页数与任意页跳转方法

你当前使用的是**游标分页（Cursor-based Pagination）**查询，这种模式本身不直接提供总页数，也不支持直接跳转到指定页码——它的核心逻辑是通过前后游标遍历数据，而非基于页码定位。要实现你需要的功能，得结合API的支持情况来处理：

一、获取分页总页数 #

游标分页本身没有总页数的概念，但如果你的GraphQL API提供相关统计字段（通常叫totalCount，也可能是count等），可以直接在查询中添加该字段获取总条目数，再通过每页条数计算总页数：

{
  postsCollection(first: 10) {
    totalCount # 添加总条目数字段
    pageInfo {
      hasNextPage,
      hasPreviousPage,
      startCursor,
      endCursor
    }
    edges {
      cursor
      node {
        id
        title
      }
    }
  }
}

总页数计算公式：总页数 = Math.ceil(totalCount / 每页条数)

如果API没有提供totalCount，说明它只支持纯游标分页，无法直接获取总页数。这种情况下只能通过逐页遍历（每次用endCursor请求下一页，直到hasNextPage为false）统计总条目数，但效率极低，不推荐使用。

二、跳转到指定页面（例如第3页） #

游标分页不支持直接跳转到指定页码，要实现这个需求有两种可行方案：

方案1：使用偏移分页（如果API支持） #

部分GraphQL API同时支持偏移分页，这时候可以用skip和first（或limit）参数直接定位到指定页码：

# 跳转到第3页，每页10条：skip = (页码-1)*每页条数 = (3-1)*10=20
{
  postsCollection(first: 10, skip: 20) {
    totalCount
    edges {
      node {
        id
        title
      }
    }
  }
}

这种方式能直接跳页，但缺点是当数据量较大或有数据插入/删除时，容易出现分页数据重复或遗漏的问题。

方案2：基于游标分页模拟跳页（仅适用于只能用游标分页的场景） #

如果API仅支持游标分页，要跳转到第N页，需要先获取前N-1页的endCursor，再用这个游标作为after参数请求目标页：

1. 请求第1页：first:10，得到endCursor_1
2. 请求第2页：first:10, after: endCursor_1，得到endCursor_2
3. 请求第3页：first:10, after: endCursor_2，获取第3页数据

这种方式需要多次请求，效率不高，且如果中间数据发生变更（比如删除条目），跳页结果可能不准确。

内容的提问来源于stack exchange，提问作者Cyprian Wacław