GraphQL 是一种用于 API 开发的查询语言和运行时，它允许客户端指定需要的数据，并以预测的方式返回结果。GraphQL 的优势在于它可以减少网络传输数据的大小，提高 API 的性能，同时也可以提供更好的类型检查和文档。在本文中，我们将介绍如何利用 GraphQL 开发一个完整的 API 系统，并提供一些示例代码。
什么是 GraphQL？
GraphQL 是一种由 Facebook 开发的查询语言和运行时，它允许客户端指定需要的数据，并以预测的方式返回结果。GraphQL 的优势在于它可以减少网络传输数据的大小，提高 API 的性能，同时也可以提供更好的类型检查和文档。GraphQL 的查询语言是一种强类型的语言，因此它可以提供更好的类型检查和文档。
开发一个 GraphQL API
安装和配置 GraphQL
要使用 GraphQL，我们需要安装 GraphQL 运行时和相应的依赖项。我们可以使用 npm 或 yarn 安装它们。
--- ------- ------- ------- ---------------
或者
---- --- ------- ------- ---------------
安装完成后，我们需要在应用程序中配置 GraphQL。我们可以使用 express-graphql 中间件来配置 GraphQL。
----- ------- - -------------------
----- ----------- - ---------------------------
----- - ----------- - - -------------------
-- -- ------- ------
----- ------ - -------------
---- ----- -
------ ------
-
---
-- -- ----- --------
----- ---- - -
------ -- -- ------ -------
--
-- -- ------- ----
----- --- - ----------
-- -- ------- ----------
------------------- -------------
------- -------
---------- -----
--------- ----
----
-- ------
---------------- -- -- -
------------------- ------- -- ---- -------
---在上面的代码中，我们定义了一个 GraphQL Schema 和一个 Query Resolver。然后，我们使用 express-graphql 中间件来配置 GraphQL，并将其添加到我们的应用程序中。最后，我们启动应用程序并监听 3000 端口。
定义 GraphQL Schema
GraphQL Schema 是一个定义了 API 的类型和操作的集合。它定义了 API 中的数据类型，以及如何查询和更新这些数据类型。
在 GraphQL Schema 中，我们可以定义以下类型：
- Scalar Types：标量类型，例如 String、Int、Float、Boolean 和 ID。
- Object Types：对象类型，例如 User、Post 和 Comment。
- Enum Types：枚举类型，例如 Gender 和 Role。
- Input Types：输入类型，例如 CreateUserInput 和 UpdateUserInput。
- Interface Types：接口类型，例如 Node 和 Entity。
- Union Types：联合类型，例如 SearchResult。
在 GraphQL Schema 中，我们可以定义以下操作：
- Query：查询操作，例如 getUser 和 getPost。
- Mutation：变更操作，例如 createUser 和 updatePost。
- Subscription：订阅操作，例如 onUserCreated 和 onPostUpdated。
下面是一个示例 GraphQL Schema：
----- - ----------- - - -------------------
-- -- ------- ------
----- ------ - -------------
---- ----- -
-------- ----- ----
------ ------
-------- ----- ----
------ ------
----------- ----- -------
--------- ---------
-
---- -------- -
----------------- ------------------ ----
-------------- ---- ------ ------------------ ----
-------------- ----- -------
----------------- ------------------ ----
-------------- ---- ------ ------------------ ----
-------------- ----- -------
-------------------- --------------------- -------
----------------- ---- ------ --------------------- -------
----------------- ----- -------
-
---- ---- -
--- ---
----- -------
------ -------
------ ------
-
----- --------------- -
----- -------
------ -------
-
----- --------------- -
----- ------
------ ------
-
---- ---- -
--- ---
------ -------
-------- -------
------- ----
--------- ---------
-
----- --------------- -
------ -------
-------- -------
--------- ---
-
----- --------------- -
------ ------
-------- ------
-
---- ------- -
--- ---
-------- -------
------- ----
----- ----
-
----- ------------------ -
-------- -------
--------- ---
------- ---
-
----- ------------------ -
-------- ------
-
---在上面的代码中，我们定义了一个包含 Query 和 Mutation 的 GraphQL Schema。我们还定义了 User、Post 和 Comment 类型，以及相应的输入类型。
实现 GraphQL Resolvers
GraphQL Resolver 是一个函数，它接收输入参数并返回输出结果。Resolver 的输入参数包括父对象、参数和上下文。Resolver 的输出结果可以是标量类型、对象类型或 Promise。
在实现 Resolver 之前，我们需要定义数据源。在本示例中，我们将使用一个包含 User、Post 和 Comment 的数组作为数据源。我们可以在 Resolver 中查询这些数据源并返回结果。
下面是一个示例 Query Resolver：
----- ----- - -
-
--- ----
----- --------
------ --------------------
------ -
-
--- ----
------ ------ --------
-------- ----- -- -- ----- -------
--------- ----
--------- -
-
--- ----
-------- ----- -------
--------- ----
------- ---
-
-
-
-
--
-
--- ----
----- ------
------ ------------------
------ -
-
--- ----
------ -------- -- ----------
-------- ----- -- -- ------ -------
--------- ----
--------- -
-
--- ----
-------- -- ---- ----------
--------- ----
------- ---
-
-
-
-
-
--
----- ---- - -
----- -- -- -- -- --------------- -- ------- --- ----
------ -- -- ------
----- -- -- -- -- -
--- ------ ---- -- ------ -
----- ---- - -------------------- -- ------- --- ----
-- ------ -
------ -----
-
-
------ -----
--
------ -- -- ------------------ -- ------------
-------- -- -- -- -- -
--- ------ ---- -- ------ -
--- ------ ---- -- ----------- -
----- ------- - -------------------------- -- ---------- --- ----
-- --------- -
------ --------
-
-
-
------ -----
--
--------- -- -- ------------------ -- ----------------------- -- ---------------
--在上面的代码中，我们定义了一个包含 user、users、post、posts、comment 和 comments Resolver 的根 Resolver。这些 Resolver 查询数据源并返回结果。
下面是一个示例 Mutation Resolver：
----- ---------- - -- -- ------------------- - ---
----- ---------- - -- -- ------------------------- -- ------------------ - ---
----- ------------- - -- -- ------------------------- -- ----------------------- -- ---------------------- - ---
----- ---- - -
----------- -- ----- -- -- -
----- ---- - -
--- -------------
----- -----------
------ ------------
------ --
--
-----------------
------ -----
--
----------- -- --- ----- -- -- -
----- ---- - --------------- -- ------- --- ----
-- ------ -
--------- - ---------- -- ----------
---------- - ----------- -- -----------
------ -----
-
------ -----
--
----------- -- -- -- -- -
----- ----- - -------------------- -- ------- --- ----
-- ------ --- --- -
------------------- ---
------ -----
-
------ ------
--
----------- -- ----- -- -- -
----- ---- - --------------- -- ------- --- ----------------
-- ------ -
----- ---- - -
--- -------------
------ ------------
-------- --------------
--------- --------
--------- --
--
----------------------
------ -----
-
------ -----
--
----------- -- --- ----- -- -- -
--- ------ ---- -- ------ -
----- ---- - -------------------- -- ------- --- ----
-- ------ -
---------- - ----------- -- -----------
------------ - ------------- -- -------------
------ -----
-
-
------ -----
--
----------- -- -- -- -- -
--- ------ ---- -- ------ -
----- ----- - ------------------------- -- ------- --- ----
-- ------ --- --- -
------------------------ ---
------ -----
-
-
------ ------
--
-------------- -- ----- -- -- -
----- ---- - --------------- -- ------- --- ----------------
-- ------ -
----- ---- - ------------------ -- --------------------- -- ------- --- --------------
-- ------ -
----- ------- - -
--- ----------------
-------- --------------
--------- --------
------- -------
--
----------------------------
------ --------
-
-
------ -----
--
-------------- -- --- ----- -- -- -
--- ------ ---- -- ------ -
--- ------ ---- -- ----------- -
----- ------- - -------------------------- -- ---------- --- ----
-- --------- -
--------------- - ------------- -- ----------------
------ --------
-
-
-
------ -----
--
-------------- -- -- -- -- -
--- ------ ---- -- ------ -
--- ------ ---- -- ----------- -
----- ----- - ------------------------------- -- ---------- --- ----
-- ------ --- --- -
--------------------------- ---
------ -----
-
-
-
------ ------
-
--在上面的代码中，我们定义了一个包含 createUser、updateUser、deleteUser、createPost、updatePost、deletePost、createComment、updateComment 和 deleteComment Resolver 的根 Resolver。这些 Resolver 更新数据源并返回结果。
使用 GraphQL Playground
GraphQL Playground 是一个交互式的 GraphQL IDE，它可以帮助我们测试和调试 GraphQL API。我们可以使用它来查询和变更数据源，并查看查询结果和错误信息。
要使用 GraphQL Playground，我们需要在应用程序中启用 graphiql 选项。
----- --- - ---------- ------------------- ------------- ------- ------- ---------- ----- --------- ---- ----
然后，我们可以在浏览器中访问 http://localhost:3000/graphql，并使用 GraphQL Playground 进行交互式查询和变更。
下面是一些示例查询：
----- -
-------- ---- -
--
----
-----
----- -
--
-----
-------
-------- -
--
-------
------ -
--
----
-
-
-
-
-
-------- -
----------------- -
------ ------ ----------
-------- ----- -- -- ----- -------
--------- ---
-- -
--
-----
-------
------ -
--
----
-----
-
-
-结论
GraphQL 是一种强大的查询语言和运行时，它可以帮助我们开发高效和可维护的 API。在本文中，我们介绍了如何利用 GraphQL 开发一个完整的 API 系统，并提供了一些示例代码。我们希望这些代码可以帮助您更好地理解 GraphQL，并在实际项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673ac29039d6d08e88afb783