GraphQL 是一种新兴的 API 查询语言，它与传统的 RESTful API 不同，它可以更精确和灵活地查询和获取数据。在 GraphQL 中，分页查询是非常常见的需求，本文将介绍 GraphQL 中的分页查询实现方式。
传统的分页查询
在传统的 RESTful API 中，分页查询通常是通过 limit 和 offset 参数来实现的，例如：
GET /users?limit=10&offset=20
这个请求将返回第 21-30 条用户记录。这种方式虽然简单，但它存在一些问题：
- 如果数据量非常大，那么每次查询都需要返回全部数据，这会导致网络带宽和服务器资源的浪费。
- 如果数据量非常小，那么每次查询都需要返回全部数据，这会导致网络带宽和服务器资源的浪费。
GraphQL 中的分页查询
在 GraphQL 中，分页查询可以通过 first 和 after 参数来实现，例如：
-- -------------------- ---- ------- ----- - --------------- --- ------ ----- - ----- - ------ ---- - -- ---- - - -------- - ----------- --------------- ----------- --------- - - -展开代码
这个查询将返回第 21-30 条用户记录，其中 first 参数表示要返回的记录数，after 参数表示从哪个游标开始查询。返回的结果包含一个 edges 数组和一个 pageInfo 对象。edges 数组包含了每条记录及其游标，pageInfo 对象包含了分页信息，例如是否有下一页，是否有上一页，起始游标和结束游标等。
实现方式
在 GraphQL 中，分页查询的实现方式通常有两种：
基于游标的分页
基于游标的分页是一种常见的分页方式，它可以避免传统的分页查询中的问题。在 GraphQL 中，基于游标的分页可以通过 cursor 字段来实现，例如：
-- -------------------- ---- ------- ----- - --------------- --- ------ ----- - ----- - ------ ---- - -- ---- - - -------- - ----------- --------------- ----------- --------- - - -展开代码
这个查询将返回第 21-30 条用户记录，其中 after 参数指定了从哪个游标开始查询，edges 数组中的每个元素都包含了一个 cursor 字段，表示该记录的游标。pageInfo 对象中的 startCursor 和 endCursor 字段分别表示了当前页的起始游标和结束游标。
基于页码的分页
基于页码的分页是另一种常见的分页方式，它可以更直观地展示当前页的位置和总页数。在 GraphQL 中，基于页码的分页可以通过 page 和 perPage 参数来实现，例如：
-- -------------------- ---- ------- ----- - -------------- -- -------- --- - ----- - ------ ---- - -- ---- - - -------- - ----------- --------------- ----------- --------- ---------- ----------- ------- ---------- - - -展开代码
这个查询将返回第 21-30 条用户记录，其中 page 参数指定了当前页码，perPage 参数指定了每页返回的记录数。pageInfo 对象中的 totalPages 和 currentPage 字段分别表示了总页数和当前页码，perPage 字段表示了每页返回的记录数，totalCount 字段表示了总记录数。
示例代码
以下是一个使用基于游标的分页查询的示例代码：
-- -------------------- ---- ------- ----- - ------------- --- - - ------------------------- ----- -------- - ---- ---- ---- - --- --- ----- ------- - ---- -------- - ------------ -------- ---------------- -------- ------------ ------- ---------- ------- - ---- --------------- - ------ ------------ --------- --------- - ---- -------- - ------- ------- ----- ----- - ---- ----- - --------------- ---- ------ -------- ---------------- - -- ----- ----- - - - --- ---- ----- ------- -- - --- ---- ----- ----- -- - --- ---- ----- --------- -- - --- ---- ----- ------- -- - --- ---- ----- ----- -- - --- ---- ----- ------- -- - --- ---- ----- ------- -- - --- ---- ----- ------ -- - --- ---- ----- ----- -- - --- ----- ----- ------ -- - --- ----- ----- ------ -- - --- ----- ----- ------ -- - --- ----- ----- ------ -- - --- ----- ----- ------- -- - --- ----- ----- -------- -- - --- ----- ----- ------- -- - --- ----- ----- ------- -- - --- ----- ----- ------ -- - --- ----- ----- ----- -- - --- ----- ----- ----- -- -- ----- --------- - - ------ - --------- --- - ----- - --- ----- -- -- - ----- ---------- - ----- - ---------------------- -- ------- --- ------ - - - -- ----- -------- - ---------- - ------ ----- ----- - ----------------------- -------------------- -- -- ------- -------- ----- ---- ---- ----- ----------- - ------------ - - - --------------- - ----- ----- --------- - ------------ - - - ------------------ - --------- - ----- ----- ----------- - -------- - ------------- ----- --------------- - ---------- - -- ------ - ------ --------- - ------------ ---------- ------------ ---------------- -- -- -- -- -- ----- ------ - --- -------------- --------- --------- --- ----------------------- --- -- -- - --------------- ------ ----- -- --------- ---展开代码
这个示例代码中定义了一个 User 类型和一个 UsersConnection 类型，UserEdge 类型表示了一个带游标的用户记录。allUsers 查询接受一个 first 参数和一个 after 参数，返回一个 UsersConnection 对象，其中 edges 数组包含了每个带游标的用户记录，pageInfo 对象包含了分页信息。查询时，根据 after 参数来确定起始游标，并根据 first 参数来确定返回的记录数，最后根据返回的记录数来确定结束游标和是否有下一页。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d29b9ca941bf71344fd2f2
