GraphQL 是一种新兴的查询语言，用于 API 的开发，它使得数据的获取更加准确，可控，可扩展。如果你想在前端领域使用 GraphQL，那么 npm 包 graphql-typed 就是你需要掌握的必备技能。
什么是 graphql-typed？
graphql-typed 是一个管理 GraphQL 模板的 npm 包，它可以用来生成 GraphQL 操作，以及进行一些常规的操作，例如分页和过滤。它是利用 TypeScript 类来描述 GraphQL 查询和变异操作的抽象目录。
graphql-typed 的安装
在安装 graphql-typed 之前，你需要在你的项目上安装以下依赖：
npm install graphql \
apollo-boost \
react-apollo \
react-router-dom \
react-scripts安装完依赖后，在你的项目中，你可以通过以下命令来安装 graphql-typed：
npm install graphql-typed
graphql-typed 的基本使用方法
创建 Query
graphql-typed 提供一个 Query 类，允许你创建查询语句。你需要在你的代码中导入 Query 类，并按照下面的步骤进行操作：
- 为查询语句命名
- 定义查询语句的输入类型
- 定义需要查询的字段
- 定义返回类型
以下是一个例子：
-- -------------------- ---- -------
------ - ----- - ---- ----------------
----- -------- ------- ------- --- ------ -- - --- ------- ----- ------ --- - -
------ -------- - ----
----- ------------- -------- -
--------- --- -
--
----
-
-
--
-上面这个代码片段定义了一个 GetUsers 查询，该查询会获取一个 id 输入参数，并返回具有 id 和 name 属性的所有用户。
创建 Mutation
除了查询，graphql-typed 还提供一个 Mutation 类，允许你创建 GraphQL 变异操作。你需要按照以下步骤操作：
- 为操作命名
- 定义变异操作的输入类型
- 定义返回类型
以下是一个例子：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
----- ------- ------- ---------- ----- - --- ------- ----- ------ - -- - -------- ------- - - -
------ -------- - ----
-------- -------------- ----------- -
------------- ------ -
-------
-
-
--
-上面这个代码片段定义了一个 AddUser 变异操作，该操作会将给定的用户添加到系统中，并返回成功状态。
发送请求并处理响应
当你定义了一个查询或变异操作后，你可以使用如下的方法来将它发送到服务端：
-- -------------------- ---- ------- ------ ------------ ---- --------------- ----- ------ - --- --------------- ----- -------- - --- ----------- ----- ------- - --- ---------- ------ -------- ------ ------------------ ---------- - --- ----- - -- ---------------- ---- -- ------------------- --------------- ------ --------- --------- ----------------- ---------- - ----- - --- ------ ----- ------- - - -- ---------------- ---- -- --------------------- ---------------
这个代码片段创建了一个 ApolloClient 实例，并使用它来发送一个 GetUsers 查询和一个 AddUser 变异操作。你可以在 then() 回调函数中对响应进行处理。
graphql-typed 的高级用法
分页
如果你需要支持分页，你需要在查询中添加类似于以下的代码：
-- -------------------- ---- -------
------ - ----- - ---- ----------------
----- ----------------- ------- ------- --- ------- -------- ------- --------- ------ -- - --- ------- ----- ------ --- - -
------ -------- - ----
----- ---------------------- -------- --------- ----- --------- ----- -
------------- --- -------- -------- --------- --------- -
--
----
-
-
--
-这个代码片段定义了一个 GetUsersPaginated 查询，该查询增加了两个 pageNum 和 pageSize 的输入参数，并仅返回指定大小的用户列表。
过滤
如果你需要支持根据某些条件过滤记录，你可以添加类似于以下的代码：
-- -------------------- ---- -------
------ - ----- - ---- ----------------
---- ---------------- -
------ - ---------
-------- - -----------
------- - ----------
-
----- ---------------- ------- ------- --- ------- ------- ---------------- -- - --- ------- ----- ------ --- - -
------ -------- - ----
----- --------------------- -------- -------- ------------ -
--------- --- ------- ------- -
--
----
-
-
--
-这个代码片段定义了一个 GetUsersFiltered 查询，并加入了一个 status 输入参数，它将仅返回符合该状态的用户。
结论
graphql-typed 是一款功能强大，易于使用的 npm 包，它使得前端开发人员能够更高效地操作 GraphQL 数据。在文章中，我们了解了如何安装 graphql-typed、如何创建查询和变异操作，在其中加入分页和过滤的支持。
要学习更多关于 graphql-typed 的信息，请查阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cd9aedbf7be33b25670d2