随着现代化 Web 应用程序愈发复杂化，对于开发人员来说，如何高效地管理和交互数据变得越加重要。传统的 REST API 已经不能满足开发需求，需要更多的交互方式来提高开发效率和灵活性。GraphQL 的出现解决了这个痛点。
什么是 GraphQL
GraphQL 是一个用于 API 开发的开源数据查询和操作语言。它通过定义类型和操作来描述数据，以及定义客户端和服务端的交互方式。GraphQL 旨在为客户端提供一种灵活，高效，强类型且易于理解的 API，从而最大程度地提高开发效率和用户体验。
GraphQL 定义了一个使用类似 JSON 的结构的查询语言，让客户端能够请求他们需要的数据，并且仅仅返回他们所需的数据，这让端口更加高效、快速。
GraphQL 优点
- 更加高效的数据请求
- 避免了 RESTful API 中的 underfetching 和 overfetching，避免了过多的请求和状态报告。
- 更加准确的数据查询和请求方式
- 客户端可以根据自身需求进行数据请求，不必要获取多余的数据。
- 易于版本升级和可维护性
- 服务端和客户端可以独立的进行扩展和修改，不会影响其他模块和功能
GraphQL 的基础语言
定义类型
type Query {
hello: String
}定义一个 Query 类型，返回值为字符串类型的 hello 字段。这里的 Query 是 GraphQL 中的一种类型。
定义查询
{
hello
}这个查询语言表示查询我们定义的类型的 Query 中的 hello 字段。执行查询后，服务端返回的结果将会是：
{
"hello": "world"
}定义变量
变量是用于动态定义 GraphQL 查询的重要元素。
query ($owner: String!, $repo: String!) {
repository(owner: $owner, name: $repo) {
name
}
}这个查询表示查询一个仓库的名称，其中 $owner 和 $repo 是变量，代表了查询中的动态值。
定义结果
结果是在 GraphQL 查询后返回的数据。结果基于数据源返回，所以需要与查询相匹配。在响应的对象中，包含了响应我们查询通用的数据集和所需的所有信息。
例如，查询一个仓库的名称和作者名：
{
repository(owner: "facebook", name: "graphql") {
name
owner {
name
}
}
}这个查询将返回以下结果：
{
"repository": {
"name": "graphql",
"owner": {
"name": "Facebook"
}
}
}GraphQL 使用实例
安装
安装 graphql-js：
npm install graphql
示例代码
创建服务器
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- - ----------- - - ---------------------------
----- - ----------- - - -------------------
---- ------
----- ------ - -------------
---- ----- -
------ -------
-------- ----- -----
----------- -------- ------
--
---- ---- -
--- ----
----- --------
---- -----
-------- ------
-
---
-------
----- ----- - -
-
--- --
----- -----
---- ---
-------- ------
--
-
--- --
----- -----
---- ---
-------- ------
--
--
------
----- ---- - -
------ -- -- -
------ ------ --------
--
----- -- -- -- -- -
------ ----------------- -- ------- --- ------------
--
------ -- ---- -- -- -
-- ------ -
------ ------------------- -- --------- --- ------
-
------ ------
--
--
-------
----- --- - ----------
---------------------------
------------------- ------------- ------- ---------- ----- --------- ---- ----
-------
---------------- -- -- -
-------------------- - ------- --- ------ -- --------------------------------
---查询数据
-- -------------------- ---- -------
-
------
-------- -- -
-----
-------
--
----------- ----- -
---
---
-
-这个查询将返回以下结果：
-- -------------------- ---- -------
-
-------- ------ --------
------- -
------- -----
---------- -----
--
-------- -
-
----- --
------ --
-
-
-总结
本文使用 GraphQL 编写了一个完整的前端实例，介绍了 GraphQL 的优点和基础语法，希望对读者了解 GraphQL 并学习如何使用它进行数据交互有所帮助。GraphQL 可以高效地管理和交互数据，提高开发效率和灵活性，为现代 Web 应用程序开发提供了重要的一步。让我们一起使用 GraphQL 创造更加优秀的 Web 应用程序吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c44c1968c7c53b0760f81