随着前端应用的复杂度不断提高，数据获取和处理成为了一项关键任务。传统的 RESTful API 往往返回非常多的数据，导致客户端需要进行大量的数据过滤和处理，而 GraphQL 则解决了这个问题。本文将详细介绍 GraphQL 的使用，从基础入门到实战应用。
什么是 GraphQL？
GraphQL 是一个由 Facebook 开源的数据查询和操作语言，它可以定义数据的结构和查询方式。相比 RESTful API，GraphQL 更加灵活，能够精确控制返回的数据，避免了传统 RESTful API 中 “over-fetching” 和 “under-fetching” 的问题。
例如，一个传统 RESTful API 的查询方式如下：
GET /api/posts/123
返回的数据格式如下：
{
"id": 123,
"title": "Hello World",
"content": "..."
}而在 GraphQL 中，查询方式如下：
{
post(id: 123) {
id
title
}
}返回的数据格式如下：
{
"data": {
"post": {
"id": 123,
"title": "Hello World"
}
}
}可以看到 GraphQL 不仅能够精确控制返回的数据，还可以避免不必要的数据传输，提高应用的性能和效率。
GraphQL 核心概念
在学习 GraphQL 之前，我们需要了解一些核心概念：
- Schema：定义了数据类型、查询和操作方式等信息；
- Query：查询数据；
- Mutation：修改数据；
- Subscription：订阅数据。
Schema
Schema 是 GraphQL 的核心概念之一，它定义了所有的数据类型、查询和操作方式等信息。Schema 的类型包括 Scalar、Object、Enum、Union、Interface 和 Input Object，其中 Object 是最常用的类型。
以下是一个简单的 Schema 示例：
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- -------- ------- - ---- ----- - -------- ----- ---- -
上述 Schema 定义了一个 Post 类型和一个查询方式 post，其中 Post 类型包括三个属性，分别为 id、title 和 content，并且都是非空值。
Query
Query 是 GraphQL 中用于查询数据的方式。它的定义方式和 RESTful API 中的 HTTP 方法类似，但是更加灵活，可以自由组合参数和返回值。
以下是一个简单的 Query 示例：
{
post(id: 123) {
id
title
content
}
}上述 Query 查询了 id 为 123 的 Post，返回了它的所有属性。
Mutation
Mutation 是 GraphQL 中用于修改数据的方式。它类似于 RESTful API 中的 POST、PUT 和 DELETE 方法，但是也更加灵活，可以自由组合参数和返回值。
以下是一个简单的 Mutation 示例：
mutation {
createPost(input: { title: "Hello", content: "..." }) {
id
title
content
}
}上述 Mutation 创建了一个新的 Post，返回了它的所有属性。
Subscription
Subscription 是 GraphQL 中用于订阅数据的方式。它可以实时地获取数据更新，类似于 WebSocket。
以下是一个简单的 Subscription 示例：
subscription {
newPost {
id
title
content
}
}上述 Subscription 订阅了新的 Post，当有新的 Post 创建时，会返回它的所有属性。
实战应用
学习了 GraphQL 的核心概念之后，接下来我们将通过一个实战应用来深入了解 GraphQL 的使用。
假设我们正在开发一个博客应用，在该应用中，需要获取所有的 Post 和搜索某个关键词的 Post。我们将分别使用传统 RESTful API 和 GraphQL 来实现这两个功能，并比较它们的差异。
Restful API 实现
首先，我们使用传统 RESTful API 来获取所有的 Post 和搜索某个关键词的 Post。我们定义两个 API：
GET /api/posts GET /api/posts?keyword=xxx
第一个 API 返回所有的 Post 列表，第二个 API 返回包含关键词的 Post 列表。
客户端的代码如下：
-- -------------------- ---- -------
-- ----- ----
-------------------
-------------- -- ----------------
----------- -- -
------------------
--
-- -------- ----
-------------------------------
-------------- -- ----------------
----------- -- -
------------------
--可以看到，由于第一个 API 返回了所有的 Post 列表，客户端需要进行大量的数据过滤和处理，而在第二个 API 中，客户端需要手动将关键词拼接到 URL 中，非常麻烦和容易出错。
GraphQL 实现
接下来，我们使用 GraphQL 来获取所有的 Post 和搜索某个关键词的 Post。
定义 Schema：
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- -------- ------- - ---- ----- - ------ -------- -------------------- --------- -------- -
定义 Resolver：
-- -------------------- ---- -------
----- --------- - -
------ -
------- -
-- ---------- ----
--
-------------- - ------- -- -
-- ------------- ----
-
-
-客户端的代码：
-- -------------------- ---- -------
-- ----- ----
----------------- -
------- -------
-------- - --------------- ------------------ --
----- ----------------
------ -
----- -
----- -
--
-----
-------
-
-
-
--
--
-------------- -- ----------------
---------- -- -
----------------------------
--
-- -------- ----
----------------- -
------- -------
-------- - --------------- ------------------ --
----- ----------------
------ -
----- --------------------- -------- -
-------------------- --------- -
--
-----
-------
-
-
--
---------- -
-------- -----
-
--
--
-------------- -- ----------------
---------- -- -
----------------------------------
--可以看到，在 GraphQL 中，客户端可以自由组合参数和返回值，不需要进行额外的数据过滤和处理，同时也不需要手动拼接 URL，非常方便和易用。
总结
本文详细介绍了 GraphQL 的使用方法和核心概念，以及实战应用。可以总结出以下几点：
- GraphQL 解决了传统 RESTful API 中 “over-fetching” 和 “under-fetching” 的问题，提高了应用的性能和效率；
- GraphQL 的核心概念包括 Schema、Query、Mutation 和 Subscription；
- GraphQL 可以自由组合参数和返回值，非常方便和易用。
如果你正在开发一个前端应用，并且需要查询和操作数据，那么可以考虑使用 GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b321a968c7c53b06bb822