什么是 GraphQL？
GraphQL 是一种用于构建 API 的查询语言。它允许客户端精确地指定需要从服务端获取的数据，而服务端只会返回客户端请求的数据，避免了多余的数据传输。GraphQL 还提供了灵活的类型系统，可以在客户端进行查询验证，并支持多种数据源，使得后端服务可以轻松地整合多种数据源。
GraphQL 的优缺点
优点
- 前端可以精确地指定获取需要的数据，减少了网络带宽的浪费。
- 前后端可以协商 API，不需要一次性返回所有数据，避免了多余的数据传输。
- GraphQL 提供了灵活的类型系统，可以在客户端进行查询验证。
- 支持多种数据源，后端服务可以轻松地整合多种数据源。
缺点
- GraphQL 查询较为复杂，需要一定的学习成本。
- 因为 GraphQL 查询比较灵活，API 的设计可能会出现较大的复杂度。
GraphQL 的结构
GraphQL 是建立在 Schema 和 Resolver 上的。Schema 定义了数据类型和查询、变更等 API 的形状。Resolver 则是服务端代码，用于处理客户端的查询并返回所需的数据。
GraphQL 的语法基本上由两部分组成：查询和变更。查询用于获取数据，变更用于修改数据。
GraphQL 的查询
首先，定义一个 GraphQL 查询：
-- -------------------- ---- -------
----- -
-------- ---- -
----
-----
----- -
-----
-------
-
-
-这里，我们在查询用户的基本信息，以及该用户的所有帖子。查询的结构定义的是一个嵌套的对象，其中 user、posts 等均对应服务端的 Resolver 函数。
GraphQL 的变更
GraphQL 变更指的是在服务端执行更改数据的操作。首先，我们定义一个基础的变更类型：
type Mutation {
updateUserName(id: Int!, name: String!): User
}这里，我们定义了一个名为 updateUserName 的变更类型，它可以接受两个参数 id 和 name，分别用于指定用户的 ID 和新的名称。变更类型的返回值应该是一个 User 类型的数据，表示修改成功后的用户信息。
下面是一个基础的 Resolver 函数，用于实现这个变更：
-- -------------------- ---- -------
----- --------- - -
--------- -
--------------- -------- ----- -- -
----- ------ - --------
----- ------- - ----------
-- -----------
-- ---
-- ----------
------ -
--- -------
----- -------
--
-
-
--这里的 Resolver 函数接受两个参数，一个 parent 参数表示上级数据对应的 Resolver 函数中返回的数据，args 参数表示查询中的参数，可以用于修改数据。我们可以在 Resolver 函数中处理数据库中的更新操作，然后返回更新后的用户信息。
GraphQL 的示例
下面是一个简单的 GraphQL 示例代码，我们实现一个包含用户和用户发表的所有博客文章的数据 API。首先，创建一个基本的 Schema 定义：
-- -------------------- ---- ------- ---- ---- - --- --- ----- ------ ------ ------ ------ ------- - ---- ---- - --- --- ------ ------ -------- ------ ------- ----- - ---- ----- - -------- ----- ---- -------- ----- ---- --------- ------- - ---- -------- - ------------------ ----- ----- --------- ---- ----------------- -------- -------- -------- --------- ------ ---- -
这里我们定义了三个数据类型：User、Post 和 Query，并且定义了两个变更类型：updateUserName 和 createPost。我们的 API 支持查询一个用户、查询一个博客文章、查询所有博客文章，并且支持更新用户名称和发布一篇博客文章。
接下来，我们需要实现这些数据类型和变更类型的 Resolver 函数，作为服务端代码。假设我们的服务端使用 Node.js 和 Express，那么可以按照如下方式实现：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ------------- --- - - ---------------------------------
----- ---- - ----------------
-- -- ------
----- -------- - ----
---- ---- -
--- ---
----- ------
------ ------
------ -------
-
---- ---- -
--- ---
------ ------
-------- ------
------- -----
-
---- ----- -
-------- ----- ----
-------- ----- ----
--------- -------
-
---- -------- -
------------------ ----- ----- --------- ----
----------------- -------- -------- -------- --------- ------ ----
-
--
-- ----
----- ------- - -
- --- -- ----- -------- ------ ------------------- --
- --- -- ----- ------ ------ ----------------- --
- --- -- ----- ---------- ------ --------------------- -
--
----- ----- - -
- --- -- ------ ------ ------- -------- ------ ----- --------- --------- - --
- --- -- ------ -------- ----- -------- -------- --- --------- --------- - --
- --- -- ------ -------- ------- -------- -------- ----- --------- --------- - --
- --- -- ------ ------ --- --------- -------- ------ --- ------- --------- --------- - -
--
-- -- --------
----- --------- - -
------ -
----- -------- ----- -- -
------ ----------------- -- ------- --- -------------------
--
----- -------- ----- -- -
------ --------------- -- ------- --- -------------------
--
--------- -- -- -
------ -------------- -- -
----- ------ - ----------------- -- ------- --- ---------------
------ ----------------- ----- - ------ ---
---
-
--
--------- -
--------------- -------- ----- -- -
----- -- - ------------------
----- ---- - ----------------- -- ------- --- ----
--------- - ----------
------ -----
--
----------- -------- ----- -- -
----- -- - ------------ - --
----- ------- - ----------------- ----- - -- ---
--------------------
----- ------ - ----------------- -- ------- --- -------------------------
------ ----------------- -------- - ------ ---
-
--
----- -
------ -------- -- -
------ ----------------- -- ------------- --- -----------
-
--
----- -
------- -------- -- -
------ ----------------- -- ------- --- -----------------
-
-
--
-- --- --- ---
----- ------ - --- --------------
---------
---------
---
-- --- ------- ----
----- --- - ----------
-- ------
----------------
-- - ------ ------ --- ------- -
------------------------ --- ---
-- -- ------- ----
------------ ----- ---- -- -- --
-------------------- ------ ----- -- --------------------------------------------
--我们使用 GraphQL 内置的类型系统和 Resolver 函数实现了基本的 API 功能，包括查询用户、查询帖子、查询所有帖子、更新用户信息和创建新的帖子。我们可以在 GraphQL Playground 中执行查询、变更等操作来验证这些功能的正确性。
总结
GraphQL 提供了一种灵活、易用、高
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66553ae6d3423812e49bcc6b