介绍
@panter/simpl-to-graphql-schema 是一个 npm 包，它可以将一个简单的 JSON schema 转换成一个 GraphQL schema。
GraphQL 是一种用于 API 的查询语言，它让客户端能够精确地指定需要的数据，而不是像 REST API 一样只返回预定义好的数据结构。使用 GraphQL 可以大大减少网络请求，提高 API 的响应速度。而 JSON schema 则是一种用于描述 JSON 数据结构的语言，它可以帮助进行数据验证、文档生成等操作。
@panter/simpl-to-graphql-schema 可以将 JSON schema 转换成 GraphQL schema，这样客户端就可以使用 GraphQL 语言来查询和修改数据了。这个包封装了很多 GraphQL 类型和指令，可以方便地进行数据验证和过滤。
在本文中，我将介绍如何使用 @panter/simpl-to-graphql-schema 这个 npm 包来创建一个 GraphQL API。你需要基本了解 JavaScript 和 GraphQL 的语法。
安装
可以使用 npm 或 yarn 来安装 @panter/simpl-to-graphql-schema，比如：
npm install @panter/simpl-to-graphql-schema
使用
基本用法
我们以一个简单的电影列表为例子来演示 @panter/simpl-to-graphql-schema 的使用。
首先，我们需要定义一个 JSON schema 来描述电影的数据结构。比如：
-- -------------------- ---- -------
-
---------- ------------------------------------------
------- ---------
------------- -
----- -
------- ---------
--
------- -
------- --------
--
-------- -
------- ---------
------- ---------- --------- --------
-
--
----------- ------ -------
-这个 schema 描述了一个 Movie 对象，包含 id、name 和 genre 三个属性。id 是一个整数，name 是一个字符串，genre 是枚举类型，只能是 Action、Comedy 或 Drama 中的一个。
接下来，我们需要将这个 JSON schema 转换成 GraphQL schema。我们可以这样做：
-- -------------------- ---- -------
----- - -------------------- - - -------------------------
----- - --------------- - - -------------------------------------------
----- ---------- - -
---------- ------------------------------------------
------- ---------
------------- -
----- -
------- ---------
--
------- -
------- --------
--
-------- -
------- ---------
------- ---------- --------- --------
-
--
----------- ------ -------
--
----- ------------- - ----------------------------
----- -------- - -
---- ----- -
------- ---------
-
---- ----- -
--- ----
----- -------
------ -------
-
--
----- ------ - ---------------------- -------- ---
--------------------上面的代码通过 toGraphQLSchema 函数将 JSON schema 转换成 GraphQL schema，然后通过 makeExecutableSchema 函数创建一个可执行的 GraphQL schema。
现在我们已经可以通过 GraphQL 查询来获取电影列表了。比如：
query {
movies {
id
name
genre
}
}数据过滤和排序
现在我们的电影列表还比较简单，只有几个属性。但是实际的项目中，往往会有更复杂的数据结构和查询需求。
比如，我们希望客户端能够根据电影类型和评分来过滤电影列表，比如只查询评分大于 8 的动作电影。同时我们还希望客户端能够根据某个字段进行排序，比如按照评分从高到低排序。
GraphQL 中没有提供原生的数据过滤和排序功能，但是可以通过定义参数来实现。
首先，我们需要修改 toGraphQLSchema 函数的第二个参数，将 JSON schema 转换成的 GraphQL schema 带有参数。比如：
-- -------------------- ---- -------
----- ------------- - --------------------------- -
-------- -
------- -
-------- -
------ -
----- --------
--
------- -
----- -----
-
--
--------- -
------- -
----- ------------------
-
-
-
-
---这个配置告诉 toGraphQLSchema 函数，我们希望 movies 查询支持 genre 和 rating 两个过滤参数，以及 rating 参数对电影评分进行排序。
接下来，我们需要在 GraphQL schema 中定义这些参数。比如：
-- -------------------- ---- -------
----- -------- - -
---- ---------------- -
---
----
-
---- ----- -
------------- ------- ------- ---- ------- ------- -------------- ------------------ ---------
-
---- ----- -
--- ----
----- -------
------ -------
------- ------
----------- ----
-
--这里我们定义了 SortingDirection 枚举类型、movies 查询支持的参数以及返回类型 Movie 中新增了 rating 和 metacritic 两个属性。
最后，我们需要在 resolvers 中实现这些参数的逻辑。比如：
-- -------------------- ---- -------
----- --------- - -
------ -
------- ------ ----- -------- ----- -- -
--- ------ - ------------
-- ------------ -
------ - --------------- -- ------- --- ------------
-
-- ------------- -
------ - --------------- -- -------- -- -------------
-
-- ------------ --- --------- -
------ - --------------- -- -- -
----- ----- - -------- - ---------
------ ------------------ --- ------ - ------ - ------
---
-
------ -------
-
-
--这里我们首先根据参数 genre 和 rating 对电影列表进行过滤，然后根据参数 sortBy 和 sortDirection 对电影列表进行排序。最后返回过滤和排序后的电影列表。
现在客户端就可以根据参数自由查询和过滤数据了。比如：
query {
movies(genre: "Action", rating: 8, sortBy: "rating", sortDirection: DESC) {
id
name
rating
}
}自定义指令
除了数据过滤和排序功能，@panter/simpl-to-graphql-schema 还提供了一些自定义指令，可以帮助客户端更自由地查询数据。
比如，我们希望客户端能够只返回电影列表中的前几个结果。这时就可以使用 @first 指令。比如：
query {
movies(first: 3) {
id
name
}
}这个查询只返回电影列表中的前 3 个结果。
这里我们需要在 GraphQL schema 中定义 @first 指令，并在 resolvers 中实现这个指令的逻辑。比如：
-- -------------------- ---- -------
----- -------- - -
--------- -------
------ ----
- -- -----
---- ----- -
------------- ----- ---------
-
---- ----- -
--- ----
----- -------
------- ------
-
--
----- --------- - -
------ -
------- ------ ----- -------- ----- -- -
--- ------ - ------------
-- ------------ -
------ - --------------- ------------
-
------ -------
-
--
------ -
------- ------- ----- -------- ----- -- -
-- ------------- -- -- -
------ ------------ - ----
- ---- -
------ -------------
-
-
-
--
-- ---这里我们定义了 @first 指令，并在 resolvers 中实现它的查询和过滤逻辑。同时我们还增加了一个自定义的 rating 字段，用来在原有的评分基础上添加一些额外信息。
现在客户端就可以使用 @first 指令来查询前几个结果了。同时我们还可以通过自定义字段来加强原有数据的相关性。
总结
通过本文的介绍，你学习了如何使用 @panter/simpl-to-graphql-schema 这个 npm 包来创建一个 GraphQL API。我们通过定义 JSON schema 和 GraphQL schema 来描述数据结构和查询需求，并通过参数和自定义指令来实现数据的过滤和排序功能。同时我们还可以使用自定义字段来加强原有数据的相关性。这个包封装了很多 GraphQL 类型和指令，可以方便地进行数据验证和过滤，可以大大减少网络请求，提高 API 的响应速度。
希望本文对你有所帮助。如果有任何问题或意见，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671bf30d0927023822794