GraphQL 是一种用于 API 的查询语言，它被设计为更高效、强大和灵活的替代 REST。与 REST 相比，GraphQL 允许客户端定义所需的数据结构，从而减少了不必要的数据传输和响应时间。在本文中，我们将介绍如何使用 JavaScript 中的 GraphQL 进行分页。
什么是分页？
分页是一种常见的数据展示方式，它将大量数据分成多个页面，以便用户可以逐页查看。在 Web 应用程序中，分页通常使用“上一页”和“下一页”按钮来让用户浏览数据。分页还可以用于优化性能，因为它可以减少一次性加载大量数据的负担。
GraphQL 分页
GraphQL 允许我们使用连接（Connection）类型来实现分页。连接类型是一个包含节点和边（Edge）的对象，边表示节点与连接中的其他节点之间的关系。我们可以使用连接类型来表示分页数据，其中每个边代表一页数据。
下面是一个使用连接类型实现分页的示例：
-- -------------------- ---- ------- ---- ----- - ------------ ---- ------ -------- -------------- - ---- -------------- - --------- --------- ------ ------------ - ---- -------- - ------- ------- ----- ----- - ---- -------- - ------------ -------- ---------- ------- -
在这个示例中，我们定义了一个查询类型 Query，它接受两个参数 first 和 after。first 表示要返回的第一页数据的数量，after 表示要返回数据的起始位置。我们还定义了一个连接类型 PostConnection，它包含 pageInfo 和 edges 两个字段。pageInfo 包含了分页信息，例如是否有下一页和结束游标。edges 包含了边，每个边代表一页数据，它包含一个游标和一个节点。node 表示该边对应的节点，这里是 Post 类型。
下面是一个使用 JavaScript 中的 GraphQL 进行分页的示例。我们将使用 Apollo Client 来发出 GraphQL 查询，并使用 React 来渲染数据。
首先，我们需要安装 Apollo Client 和 React：
npm install apollo-boost react-apollo graphql-tag graphql --save
然后，我们需要创建一个 Apollo Client，以便我们可以向服务器发出 GraphQL 查询。在这个示例中，我们将使用 GitHub GraphQL API 来获取分页数据。
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: 'https://api.github.com/graphql',
headers: {
Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
},
});接下来，我们需要定义查询和分页变量。为了方便起见，我们将使用一个 React 组件来定义它们。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- --------- - ---
-------- ----------- ------ ---------- -------- -- -
----- ------- --------- - ---------------
----- - ----- -------- ------ --------- - - --------------- -
---------- - ------------- ------ ---------- ----- --
---
----- -------------- - -- -- -
-----------
---------- - ------------- ------ ---------- ------ ----------------------------- --
------------ ------------ - --------------- -- -- -
----- -------- - ----------------------------
----- -------- - -------------------------------
------ ---------------
- -
------ -
----------- ----------------------------
------ --------------------------- -------------
---------
--
-
- -----------
--
---------- -- -
----------------------------------------
---
--
------ ---------- ----- -------- ------ ----------- -------------- ---
-在这个组件中，我们使用 useQuery hook 来获取分页数据。我们还定义了一个 handleLoadMore 函数，它会在用户点击“加载更多”按钮时触发。该函数使用 fetchMore 方法来获取下一页数据，并将其添加到现有数据中。
最后，我们可以使用 Paginator 组件来渲染分页数据。我们将使用 render props 模式，以便我们可以在子组件中自定义数据渲染。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- ---------------
------ - ----- - ---- ---------------
----- ----------- - ----
------------- -------- ------- ------- -
------------- ------- ----- ----------- ------ --- ------ ------- -
---------------
-------- -
---------
-----------
-
----- -
---- -
--- -- ---------- -
-------------
-----------
---------- -
----------
-
-
-
-
-
-
--
-------- ----- -
------ -
-----
---------------------
------ ------------------- ------------ ------ --------- ---
--- ----- -------- ------ ---------- -- -- -
-- ------- -
------ ----------- ----------------------
-
-- --------- -
------ ----------------------
-
----- - ------ - - -----
------ -
-----
----
-------------------- ---- -- -- -
--- -------------------------
-----------------------------
-------------------------
------------------------------- ---------
-----
---
-----
---------------------------- -- -
------- ------------------------- -------------
--
------
--
--
--------
------
--
-在这个示例中，我们使用 Query 组件来发出 GraphQL 查询，并将 Paginator 组件作为子组件传递给它。我们还定义了一个 POSTS_QUERY，它查询 GitHub API 中与“graphql”相关的存储库。我们将 search 对象解构出来，以便我们可以在渲染数据时使用它。
最后，我们将 search 对象中的 edges 属性映射到一个列表中，并使用 onLoadMore 函数来加载更多数据。
结论
在本文中，我们介绍了如何使用 JavaScript 中的 GraphQL 进行分页。我们通过定义连接类型来表示分页数据，并使用 Apollo Client 和 React 来发出和渲染查询。希望这篇文章对你有所帮助，让你更好地理解 GraphQL 和分页概念。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676a11ac44e319dee419a1c5