GraphQL 是一种新兴的 Web API 技术，因为其强大的查询语法和可扩展性而获得了越来越多的关注。它不仅可以支持各种前端技术，而且也可以轻松地在后端积极维护。
在大多数应用程序中，对数据进行分页查询是必须的。在这篇文章中，我们将深入了解如何在 GraphQL 中实现分页查询。
为什么需要分页查询？
分页查询通常是在 Web 应用程序中使用的一种技术，该技术有许多优点。下面是一些优点：
- 较好的性能：分页查询使我们能够仅检索少量数据。这样可以避免请求过大导致的网络拥堵和阻塞，减少服务器负担并提高响应时间
- 更少的数据传输：只查询所需数据可以节省带宽，减少延迟时间并提高加载速度
- 更好的用户体验：数据在逐渐加载时渐进式显示，提高用户体验，并避免整个页面的等待
在 GraphQL 中实现分页查询，通常需要以下步骤：
1. 定义查询参数
我们可以简单地定义一个输入类型来表示分页查询参数。此输入类型应该包含以下参数：
<input PaginateInput> {
#分页数据的页码
page: Int!
# 每页要显示的记录数
pageSize: Int!
}2. 声明查询字段
我们需要声明查询字段以返回分页数据。通常，我们需要在查询中传递“分页数据”和“分页信息”两个参数。分页信息包括总记录数，当前页码以及每页显示的记录数：
-- -------------------- ---- ------- ---- ----- - ------------ ---------------- --------------- - ---- --------------- - ----- ----------- ---- - ------- --------- ---- - ----- ------------ ---- ------ ------------ -
3. 定义 resolver 函数
在 resolver 中，我们需要计算要查询的skip和limit值，并且返回分页信息：
-- -------------------- ---- -------
------ - ----- ---- - ---- --------------
----- -------- -------- - ----- -- -
----- - ----- -------- - - ------
----- --------- - ----- - -- - ---------
----- ----- - ----- ----------------------------------------
----- ---------- - ----- --------------------
------ -
-----------
---------
------------ -----
------ ---------------- -- --
------- --------
----- -----
----
--
-传递的post 字段， skip(skipCount)和 take(pageSize)这两个函数，可以用于计算查询跳过的记录数和每个分页应返回的记录数。
4. 解析 edges 和 cursor
在我们的getPosts函数中，我们需要返回简单的数组。这样做是为了兼容连接规范中的edges和cursor，使我们面向更多连接与分页的库，相关库可以基于连接对象支持更强大的分页特性， 比如：只要光标在上一页，就根据之前的光标获取最新的论点数据。因此，我们还需要知道如何解析edges和cursor：
-- -------------------- ---- -------
---- -------- -
------- ---
----- -----
-
----- -------- -------- -------- -
----- ------ --------- - ------
----- --------- - ----- - -- - ---------
----- ------- ---------- - ----- ----------------------------------------
----- ---------- - ----- --------------------
-------
-----------
---------
------------ -----
------ ---------------- -- --
------- ----------------------------------------
----- -----
----
-
-
-------- ------------------ -
------ ------------------- ----------------------------
-
-------- ---------------------- ------- -
----- ---- - ------------- ------- ---------- -- -- -
----- ------ - -----------------------
------ ------ --- -------
---
------ ---------- -- -----
-
----- -------- ------------------- ----- ---- ----- -
----- ----- - ----- ------------------ ----- ---- ------
----- - ------ - - -----
------ ---------------------- --------
-在上面的代码中，我们在生成 postEdge 时将 ID 转成了 base64，这是必要的，因为 graphql 规范中指定了 cursor 必须是字符串类型。
我们同样提供了两个实用函数： cursorToID(cursor)和getNodeByCursor (edges, cursor)。前者应该根据你的要求进行修改。后者查找给定光标的儿子节点，并尝试将其返回，如果不存在，则返回 null。
5. 查询分页数据
我们可以使用以下查询来获取分页数据：
-- -------------------- ---- -------
------------ ----- ---------- ----- -
------------ - ----- ------ --------- --------- -- -
----- -
------
---- -
--
-----
-------
-
-
----------
--------
-----------
-
-在这个查询中，我们传递了一个input参数，这个参数包含page和pageSize参数。我们使用这些参数来获取所需的数据。此查询将返回一个包含帖子的 edges 数组的对象，以及有关总记录数、yed数据的数量和当前页码的其他信息。
结论
现在您已经掌握了在 GraphQL API 中进行分页查询的概念和实现方法。使用__Pagination Extension__ 或 Relay 库可减少编写此代码的时间和工作量。
虽然它是一项有点棘手的任务，但掌握这个技能将使你能够创建高效的分页查询，从而提高用户体验和页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67302c8deedcc8a97c914200