GraphQL 是一种新型的 API 查询语言，用于构建灵活、高效、可靠的应用程序。它是由 Facebook 开发的并在 2015 年开源，逐渐在全球范围内得到了广泛的应用。
本文将介绍 GraphQL 的基本概念和特点，提供全面的入门指南，并附带示例代码，目的是帮助读者快速掌握 GraphQL，提高 Web 开发效率。
什么是 GraphQL？
GraphQL 是一种由 Facebook 开发的数据查询和操作语言，通过定义灵活且可伸缩的数据查询 API 接口来取代 RESTful API 接口。它通过一个统一的 API 去解决传统 API 的局限性。
传统的 RESTful API，每个端点都对应一个请求，一个请求对应一个响应，而且响应数据与请求参数之间没有明确的联系。而 GraphQL 的 API 接口允许我们设计出从客户端角度来看完美的数据模型，从而大大减轻了客户端和服务端之间的信息处理负担。
GraphQL 的核心优势就是高效、灵活和可伸缩。它允许客户端进行复杂、多层次的数据查询和操作，在保证性能与可扩展性的同时提供了更好的用户体验。
GraphQL 的核心概念
Schema
在 GraphQL 中，Schema 是定义数据模型和属性的核心。它定义了所有可查询的字段、属性、类型和查询操作，并提供了完整的查询文档。Schema 是 GraphQL API 的中心，客户端可以通过查询文档了解如何查询需要的数据。一个 API 会对应一个 Schema。
以下是一个 Schema 定义示例：
-- -------------------- ---- ------- ---- ----- - ------------ ----- -------- ---------- ---------- - ---- -------- - --- --- ----- ------ ---- --- -------- ------- - ---- ------- - ----- ------- ------- ------ -
在这个 Schema 中，我们定义了 Query 数据模型和 Customer 数据模型，Query 上暴露了两个查询操作：根据 id 查询一条 Customer 记录，和查询所有 Customer 记录。Customer 模型有 id，name，age 和 address 属性，address 属性是一个 Address 模型类型。
Query
在 GraphQL 中，一个 Query 就是对数据进行查询的操作。通过 Query，我们可以请求 API返回一个特定形式的数据。
以下是一个 Query 的定义示例：
{
customer(id: 1) {
name
address {
city
}
}
}该 Query 表示请求服务器返回 id 为 1 的 Customer 记录的 name，以及该记录的 address.city 字段值。
Mutation
Mutation 是指修改、删除、插入等操作。Mutation 和 Query 的不同之处在于它更改数据，因此使用 Mutation 的请求必须要进行身份验证和授权。
以下是一个 Mutation 的定义示例：
mutation {
addCustomer(name: "Tom", age: 26) {
id
name
age
}
}该 Mutation 表示向 API 添加一条名字为 Tom，年龄为 26 的新 Customer 记录。服务器会返回该 Customer 记录的 id，name 和 age 值。
Subscription
Subscription 是指对于某些数据进行订阅和监听，它可以实时返回相关数据的变动情况。
以下是一个 Subscription 的定义示例：
subscription {
newCustomer {
id
name
}
}该 Subscription 表示订阅服务器上新添加的 Customer 记录。每当有新的 Customer 记录添加到数据库中时，会返回该记录的 id 和 name 字段值。
GraphQL 的优势
查询粒度更细
GraphQL 是一种面向数据层的查询语言，旨在为客户端提供一种更灵活的数据访问方式。在 GraphQL 中，客户端可以自由地指定查询的数据，可以查询或者单独修改数据中的某个字段或者只针对一个数据记录指定特定属性的值，而无需向服务器请求整个记录的内容。
没有过多 API 额外操作
在传统的 RESTful API 中，如果我们想在客户端请求多个数据记录，我们通常需要发送多个 HTTP 请求。而在 GraphQL 中，我们可以在一个单一的请求中一次性请求多个数据，并且查询文档定义的数据集非常可扩展，这大大减少了 API 操作的数量以及对 API 的负载。
前端与后端分离
GraphQL API 接口提供的 Schema 包含了所有用户可以查询的数据信息以及操作，因此前端可以方便地在不了解底层实现的情况下构建完整的数据模型。这样使得前端和后端分离，让前端团队和后端团队各自负责和掌控好自己的部分，大大提高了开发团队的效率。
GraphQL 示例代码
以下是一个基本的 GraphQL 示例代码，它定义了一个 schema.graphql 文件
-- -------------------- ---- -------
-- -------------- --
---- ---- -
------ ------
------- ------
----- ---
-
---- ----- -
------ ------
-
-- ---------- --
--
-------- ---- -----------
--------- ------ --------
------- ----
--
-
-------- ---- --------
--------- ------- ---------
------- ----
--
-
-------- ---- -- ----- ------
--------- ---- -------
------- ----
--
-- ----------- --
----- ----- - -----------------------
----- --------- - -
------ -
------ -- -- -----
-
-
-------------- - ----------在这个示例中，我们定义了一个 Book 模型，其包含 title，author 和 year 三个字段。我们还定义了一个名为 Query 的类型，该类型定义了一个 books 查询操作，用于获取所有图书记录。在 resolver.js 文件中，我们返回已经定义好的数据源。所有数据都从 books.json 文件中获取，然后由 resolvers.js 负责将数据返回给客户端。
使用 GraphQL 需要一个服务器接收用户请求，传递请求到 resolver.js 文件进行处理，demo-http-graphql 简化了使用过程，只需要在命令行执行 index.js 即可。可以通过 http://localhost:4000/graphql 访问 GraphQL Playground 进行测试。（注意：需要在本地先安装 graphql 和 express 包）
-- -------------------- ---- ------- ----- - ----------- - - --------------------------- ----- ------- - ------------------- ----- ------------- - ---------------------------- ----- --------------- - ------------------------- ----- --- - ---------- ------------------- ------------- ------- -------------- ---------- ---------------- --------- ----- ---- ---------------- -- -- - ---------------------- -- ------------------------- ---
总结
本文介绍了 GraphQL 的基本概念和特点，以及详细的示例代码。在使用 GraphQL 时，要注意 Schema 的定义，QueryBuilder 的构造和 Resolver 的实现，这三个步骤构成了整个 GraphQL 查询请求的基础框架。
作为一种全新的 API 查询语言，GraphQL 具有很多优点，如可伸缩的查询操作、精细的查询粒度、前后端分离、减少 API 增强等等。因此，使用 GraphQL 可以大大提高数据操作效率，促进 Web 应用程序的发展。熟练掌握 GraphQL 技术是每位前端开发人员的必修技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c8e8b968c7c53b0ef8c5e