随着 Web 技术的不断发展，Web API 已经成为了互联网生态系统的一个重要组成部分。前端工程师需要通过 Web API 与后端工程师协作，实现网站或应用程序的功能。然而，传统的 REST API 存在着一些限制和缺陷，例如需要多次请求才能获取完整数据，API 的形式为资源型而不是操作型等等。这时，GraphQL 应运而生，它是构建 Web API 的新标准。
什么是 GraphQL？
GraphQL 是一种用于 API 设计的查询语言，可以满足各种客户端的数据需求。它是由 Facebook 开发的，后来在 2015 年开源。GraphQL 的基础设计思想是数据的描述与数据的获取分离，客户端可以根据自己的需要提出一个或多个请求，返回与所请求的信息相符的数据。GraphQL 的语法和类型系统非常强大和灵活，可以构建出返回任意类型数据的 API。
相较于传统的 REST API，GraphQL 具有以下显著的优势：
- 可以在一个请求里获得多个数据集，减少了请求次数，提高了效率。
- GraphQL 具有自我描述的特点，可以针对不同的客户端返回不同的数据。
- API 的形式是操作型的，而不是资源型的，更符合实际业务需求。
GraphQL 的核心概念
在理解 GraphQL 时，需要掌握一些核心的概念，包括：
查询（Query）
查询是 GraphQL 最基本的操作，用于指定客户端所需要的数据。查询类似于函数调用，客户端发出查询请求，服务端返回客户端所需的数据。
比如下面这个简单的查询：
{
user(id: 123) {
name
age
email
}
}这个查询的功能是获取指定 id 的用户的信息，其中 user 相当于函数名，id 是参数，name、age、email 是返回值。
类型（Type）
GraphQL 定义了一些基础类型（如 String、Int、Boolean、Float 等），同时可以根据业务需求定义自己特定的类型。这些类型可以与其他类型组合，形成更复杂的类型结构。
例如，下面定义了一个 User 类型：
type User {
id: ID!
name: String!
age: Int
email: String
}User 类型包含了 id、name、age、email 四个字段，它们的类型分别为 ID、String、Int、String。其中 ! 表示该字段不允许为空。
变量（Variable）
变量可以让客户端在查询时传递参数。变量由 $ 开头，后面跟变量的名称和类型。
例如，以下查询使用了变量 $userId 来指定所需用户的 id：
query GetUser($userId: ID!) {
user(id: $userId) {
name
age
email
}
}碎片（Fragment）
碎片是一种可重用的、命名的字段集合，可以在查询中使用。碎片通常用于组织重复的字段或属性，提高查询的复用性和可维护性。
以下是一个碎片的示例：
fragment UserFields on User {
name
age
email
}其中 UserFields 是该碎片的名称，User 是该碎片所包含的类型。可以在查询中使用该碎片：
query GetUsers {
allUsers {
...UserFields
}
}操作（Operation）
操作是一个 GraphQL 查询的顶层元素，表示客户端需要进行的具体操作。常见的操作有查询（query）、变更（mutation）和订阅（subscription）。
- 查询用于获取数据；
- 变更用于修改数据；
- 订阅用于实时获取数据的更新。
在 Node.js 中使用 GraphQL
在 Node.js 中使用 GraphQL，我们需要安装 graphql 模块以及 express 和 express-graphql 模块。
下面是一个简单的示例，使用 GraphQL 查询获取用户列表：
-- -------------------- ---- -------
----- - -------- ----------- - - ------------------
----- ------- - ------------------
----- ----------- - --------------------------
-- -- ------
----- ------ - -------------
---- ----- -
------ --------
-
---- ---- -
--- ---
----- -------
---- ---
------ ------
-
--
-- ----
----- -- - -
------ -
- --- ---- ----- -------- ---- --- ------ ------------------- --
- --- ---- ----- ------ ---- --- ------ ----------------- --
- --- ---- ----- ---------- ---- --- ------ --------------------- -
-
-
-- ----
----- ---- - -
------ -- -- --------
-
-- -- ------- ----
----- --- - ---------
-- -- --------------- ---
------------------- -------------
-------
---------- -----
--------- ----
---
-- -----
---------------- -- -- -
------------------- -- ------- -- -----------------------
--运行该示例后，在浏览器中访问 http://localhost:3000/graphql，可以在 GraphQL Playground 中进行查询。
总结
GraphQL 是一个非常强大和灵活的 API 设计语言，可以极大地提高开发效率和用户体验。相比于传统的 REST API，GraphQL 具有更多的优势和可操作性。在日常开发中，前端开发工程师可以使用 GraphQL，通过自定义的查询获取符合业务需求的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a5cb295b1f8cacd251b21