GraphQL 是一种新的 API 规范，它可以更好地解决 RESTful API 存在的一些问题。相比 RESTful API，GraphQL 在数据传输上更加高效、灵活，并且可以大幅提升前端查询数据的体验。本文将介绍如何使用 GraphQL 优化 RESTful API。
什么是 GraphQL？
GraphQL 是 Facebook 于 2012 年推出的一种新的 API 规范。与传统的 RESTful API 不同，GraphQL 定义了一种描述 API 的语言，并且提供了一个让客户端和服务端之间协商和控制查询的机制。GraphQL 的一个主要特点就是客户端可以精确地定义需要获取的数据，并且可以跨多个关系型数据表和服务端查询接口请求相应的数据。
GraphQL 与 RESTful API 的比较
相比 RESTful API，GraphQL 的一个主要优点就是可以避免“Overfetching”和“Underfetching”的问题。
在 RESTful API 中，一些请求可能会返回比客户端需要的更多数据，或者会需要客户端向多个接口发送请求来获取所需数据，这就是“Overfetching”和“Underfetching”问题。而通过 GraphQL，客户端可以精准地获取所需数据的字段，并且可以一次性地获取所有需要的数据。这使得数据的传输量更小、更高效，并且可以减少服务端和客户端的交互次数。
要在项目中使用 GraphQL 优化 RESTful API，需要以下步骤：
1. 定义 schema
在 GraphQL 中，schema 是定义 API 中数据类型和查询规则的一种语言。schema 包含了类型定义和 API 可以执行哪些操作的规则。
下面是一个简单的 schema 示例：
-- -------------------- ---- ------- ---- ---- - --- --- ----- ------- ---- ---- - ---- ----- - ----------- ----- ---- -
这个 schema 定义了一个 User 类型和一个 Query 类型，其中 User 类型包含了用户的 ID、名称和年龄信息，而 Query 类型包含了一个查询 getUser(id) 的方法，用于查询指定 ID 的用户。
2. 实现 resolver
在 GraphQL 中，resolver 负责执行查询并返回查询结果。resolver 通常需要实现与 schema 中相同的数据类型和操作，并连接到数据源。
下面是一个 resolver 示例：
-- -------------------- ---- -------
----- ----- - -
- --- ---- ----- ------ ---- -- --
- --- ---- ----- -------- ---- -- --
- --- ---- ----- --------- ---- -- --
-
----- --------- - -
------ -
-------- -------- ----- -------- ----- -- -
------ --------------- -- ------- --- --------
-
-
-这个 resolver 定义了一个查询 getUser，根据传入的 ID 查询 users 数据源中对应的用户数据并返回。
3. 集成 GraphQL
集成 GraphQL 的方式与集成其他库类似。在 Node.js 中，可以使用 express-graphql 中间件将 GraphQL 集成到现有服务中。
下面是一个集成 GraphQL 的示例：
-- -------------------- ---- -------
----- ------- - ------------------
----- ----------- - --------------------------
----- - ----------- - - ------------------
-- -- ------
----- ------ - -------------
---- ---- -
--- ---
----- -------
---- ----
-
---- ----- -
----------- ----- ----
-
--
----- ----- - -
- --- ---- ----- ------ ---- -- --
- --- ---- ----- -------- ---- -- --
- --- ---- ----- --------- ---- -- --
-
-- -- --------
----- ---- - -
------ -
-------- -------- ----- -------- ----- -- -
------ --------------- -- ------- --- --------
-
-
-
-- -- ------- --
----- --- - ---------
-- -- ------- ---
------------------- -------------
-------
---------- -----
--------- ----- -- -- ------- ---
---
-- ----
---------------- -- -- -
------------------- ------- -- ---- ------
--在这个示例中，我们使用了 express-graphql 中间件集成了 GraphQL，定义了 schema，并创建了一个 users 数据源。我们还实现了一个 resolver 来执行查询并返回相应的结果。最后通过调用 listen 启动了服务。
4. 查询数据
在 GraphQL 中，查询数据的方式非常灵活和精确。客户端可以精确指定需要查询的字段和数据类型，并且嵌套查询非常容易。
下面是一个查询数据的示例：
{
getUser(id: "1") {
name
age
}
}这个查询请求中只查询了 getUser 的 name 和 age 两个字段，并且仅查询了 ID 为 1 的用户数据。
在前端中可以使用 Apollo Client 或其他 GraphQL 客户端库来发起 GraphQL 查询请求。下面是一个使用 Apollo Client 查询数据的示例：
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- ----------------
----- ------ - --- --------------
---- --------------------------------
------ --- ----------------
--
----- -------- - ----
----- ------------ ---- -
----------- ---- -
----
---
-
-
-
--------------
------ ---------
---------- - --- --- --
---------------- -- -
----------------------------------
--在这个示例中我们使用了 @apollo/client 库创建了一个 Apollo Client 实例，并定义了一个 GET_USER 的查询语句，然后使用 query 方法发起了一个查询请求。最后输出了查询结果。
总结
GraphQL 是一种与传统的 RESTful API 不同的 API 规范，可以更好地解决“Overfetching”和“Underfetching”的问题。在项目中使用 GraphQL 优化 RESTful API 主要包括定义 schema 和实现 resolver，以及使用 GraphQL 客户端库来查询数据。GraphQL 可以帮助我们更加高效、灵活地查询数据，大幅提升前端查询数据的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ef11f48841e9894d54404