随着前端技术的不断发展以及移动设备的广泛应用，RESTful API 已经成为了一个不可或缺的组成部分。然而，RESTful API 的缺陷也逐渐显现出来：请求和响应的数据结构固定，需要进行多次请求才能得到所需的数据，数据冗余等。而 GraphQL 则可以有效地解决这些问题。
什么是 GraphQL
GraphQL 是一个由 Facebook 开源的查询语言和运行时系统，旨在提供更加高效、强大、灵活的 API。它可以替代 RESTful API，使得客户端可以按照自己的需求从服务器获取所需数据，而不必受到服务器的限制。
GraphQL 有以下几个特点：
- 它是一种强类型的查询语言，即客户端可以明确指定需要返回哪些数据。
- 它是一个单入口的 API，即客户端只需要发送一个查询请求便可以获取所有需要的数据。
- 它是可扩展的，即客户端可以随时根据需要添加需要返回的字段。
- 它是自文档化的，即客户端可以根据 GraphQL 的 schema 查看返回数据的结构以及当前可用的 API。
GraphQL 和 RESTful API 的对比
传统的 RESTful API 使用 HTTP 请求来执行 CRUD 操作（创建、读取、更新、删除），但仅限于如下的 HTTP 方法、状态码和数据格式：
- HTTP 方法：GET、POST、PUT、PATCH、DELETE。
- HTTP 状态码：200、201、204、400、401、403、404、422、500。
- 数据格式：JSON、XML、HTML、Text 等。
GraphQL 则更加灵活，它可以使用单一的端点执行所有操作，而且响应格式可以随需求动态变化。两者之间的主要区别如下：
- 数据结构：RESTful 可能会因为数据结构不够灵活而产生多个请求或重复数据，GraphQL 可以一请求内获取所需数据的子集。
- 版本管理：如果要添加或更改 API 端点，则需要创建新版本的 RESTful API。GraphQL 的单入口使得修改和添加新功能变得非常容易。
- 接口文档：RESTful API 需要提供接口文档，以便客户端开发人员了解数据格式。GraphQL 的 schema 充当了接口文档，使得开发人员可以了解 API 支持哪些操作。
- 性能：GraphQL 可以避免不必要的网络请求，这也是许多公司选择它的原因之一。
GraphQL 的使用
虽然 GraphQL 具有许多优点，但使用它也有一定的门槛。下面是使用 GraphQL 的一般步骤：
1. 编写 GraphQL schema
GraphQL 的 schema 定义了服务器上可用的操作和数据结构。它是一种数据类型语言，类似于 JavaScript。下面是 schema 的一些示例：
-- -------------------- ---- ------- ---- ----- - ---------- ----- ------ ------------ ----- -------- - ---- ------ - ----- ------- --------- --- - ---- -------- - ----- ------- ------ ------- -
schema 定义了 Query 类型，它包含 planet 和 starship 两个字段。planet 和 starship 两个字段定义了它们自己独立的类型，它们的属性及其类型也都被定义在了 schema 中。
2. 搭建 GraphQL 服务器
可以使用现成的 GraphQL 服务器，比如 Apollo Server。也可以在自己的服务器上运行官方提供的 graphql-js 库。下面是一个搭建 Apollo Server 的示例：
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- -------- - ----
---- ----- -
---------- ----- ------
------------ ----- --------
-
---- ------ -
----- -------
--------- ---
-
---- -------- -
----- -------
------ -------
-
--
----- --------- - -
------ -
------- -------- ----- -------- ----- -- -
------ -------------------------------------------------
-------------- -- ----------------
---------- -- -
------ -
----- ----------
--------- -------------
-
--
--
--------- -------- ----- -------- ----- -- -
------ ---------------------------------------------------
-------------- -- ----------------
---------- -- -
------ -
----- ----------
------ -------------------
-
--
-
-
--
----- ------ - --- -------------- --------- --------- ---
----------------------- --- -- -- -
--------------- ------ ----- -- ---------
---3. 发送查询请求
客户端可以使用任何支持 GraphQL 的客户端库来发送请求。下面是使用 Apollo Client 发送查询请求的示例：
-- -------------------- ---- -------
------ - ---- ------------- ------------- - ---- -----------------
----- ------ - --- --------------
---- ------------------------
------ --- ---------------
---
----- ----------- - ----
----- -
---------- ---- -
----
--------
-
-
--
----- ------------- - ----
----- -
------------ ---- -
----
-----
-
-
--
--------------
------ -----------
---------------- -- ----------------------------
--------------
------ -------------
---------------- -- ----------------------------这里我们定义了两个查询语句：planetQuery 和 starshipQuery。由于我们的 schema 定义了类型和属性，客户端查询语句中的属性也必须包含在对应的类型中。
4. 响应结果
GraphQL 的响应结果非常灵活，客户端可以自由选择返回所需的字段。例如，客户端只需要 planet 的 name 属性，可以使用以下查询语句：
query {
planet(id: "1") {
name
}
}总结
尽管 GraphQL 需要学习和使用一定的门槛，但它可以为我们的应用程序提供更好的灵活性、效率和维护性。特别是在大量数据的情况下，使用 GraphQL 避免了不必要的重复请求，使得网络通信更加高效。如果您正在寻求一种更好的 API 解决方案，GraphQL 绝对值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca17e35ad90b6d04198914