在前端开发中，当我们需要从服务器获取数据时，通常我们会使用 RESTful API。这种方式能够满足一般需求，但是当数据结构复杂、数据量大，或者查询方式多种多样的时候，就会显得不够灵活。
GraphQL 是一种新兴的数据查询语言，它可以让前端开发者更加灵活、高效地请求数据。本文将详细介绍 GraphQL 在前端开发中的应用，并提供实际案例以及代码实现。
什么是 GraphQL？
GraphQL 是一种由 Facebook 开发的数据查询语言和运行时。它通过定义类型和字段来描述应用程序中的数据模型，并允许客户端应用程序按需查询数据。与 RESTful API 不同的是，GraphQL 使用单个端点来处理多个查询请求，并且允许客户端请求特定数据字段，而不是返回整个数据集。
GraphQL 最初在 Facebook 内部使用，在 2015 年首次向外界发布。现在，它已经成为一个独立的开源项目，并且被许多大型公司广泛使用，如 GitHub、Yelp、Twitter、Shopify 等。
GraphQL 的优势
- 精确查询：GraphQL 允许客户端应用程序按需查询数据。客户端可以精确描述需要的数据，并且只会返回这些数据，无需返回整个数据集。这样可以减小网络传输的数据量，加快响应速度。
- 多个数据源：GraphQL 允许客户端应用程序同时查询多个数据源，并将结果合并在一起。这使得前端无需为每次查询请求创建一个新的 API，而是可以在一个 API 中处理所有请求，简化开发和维护。
- 开发效率：GraphQL 提供了强大的类型检查和自动文档生成功能，使得开发者可以更快地开发、测试和维护应用程序。
GraphQL 的使用
数据结构
在 GraphQL 中，数据结构由类型定义和字段组成。类型定义描述了数据类型及其属性，字段是数据类型中的属性。
例如，下面的类型定义描述了一个图书馆的数据结构：
-- -------------------- ---- ------- ---- ------- - ----- ------- -------- ------- ------ -------- - ---- ---- - ------ ------- ------- ------- - ---- ------ - ----- ------- ------------ ------- -
在这个数据结构中，有三个类型：Library、Book、Author。Library 类型具有三个字段：name、address 和 books。books 是一个 Book 类型的数组，Book 类型有两个字段：title 和 author。author 是一个 Author 类型的对象，Author 类型有两个字段：name 和 nationality。
查询语句
在 GraphQL 中，客户端应用程序通过发送查询语句来请求数据。查询语句由查询字段和查询参数组成。查询字段是要获取的数据的字段，查询参数是在这些字段中应用的过滤和排序规则。
例如，下面是一个查询所有书籍和作者的查询语句：
-- -------------------- ---- -------
-
----- -
-----
------ -
----
-----------
-
-
-这个查询语句表示客户端想要获取所有书籍的标题以及它们的作者的名字和国籍。服务器将返回一个包含这些字段的 JSON 数据。
变更操作
GraphQL 不仅支持查询数据，还支持变更数据。变更操作是指对服务器上的数据进行更改、删除或添加。变更操作由 mutation 字段定义，并且可以在变更操作中使用查询参数。
例如，下面的变更操作描述了向图书馆中添加新书的过程：
-- -------------------- ---- -------
-------- -
-------------- ---- -- ----- ------ ------- ---- ------- -
-----
------ -
----
-----------
-
-
-这个变更操作表示客户端想要将一本新书添加到图书馆中。服务器将返回包含新书的 title 和 author 的 JSON 数据。
GraphQL 实例
接下来，我们将编写一个使用 GraphQL 查询 GitHub API 的简单前端应用程序。我们将显示用户搜索结果的 GitHub 存储库列表，并可以单击存储库以查看更多详细信息。
1. 安装依赖
我们将使用 React 和 Apollo Client 来开发这个应用程序。要创建 React 应用程序，请运行以下命令：
npx create-react-app github-app cd github-app
在项目目录下，安装 Apollo 和其他依赖项：
npm install apollo-boost @apollo/react-hooks graphql
2. 配置 Apollo 客户端
在 src/index.js 文件中，引入 ApolloClient 和 InMemoryCache，然后创建客户端：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- - ---- ----------------------
------ ------------ ---- ---------------
------ - ------------- - ---- ------------------------
------ --- ---- --------
----- ------ - --- --------------
---- ---------------------------------
-------- ----------- -- -
----------------------
-------- -
-------------- ------- --------------------------------------
-
---
--
------ --- ---------------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--这里，我们创建了一个 Apollo 客户端，并将其作为应用程序的全局状态提供。客户端通过设置 uri 配置项来连接到 GitHub 的 GraphQL API。然后在请求头中添加了 authorization，用于进行身份验证。InMemoryCache 是 Apollo 提供的默认缓存实现。
3. 查询 GitHub API
在 src/App.js 文件中，我们将编写查询 GitHub API 的代码。首先，我们将定义一个查询 SEARCH_REPOS，它将搜索 GitHub 上匹配给定字符串的存储库。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - -------- - ---- ----------------------
------ - --- - ---- ---------------
----- ------------ - ----
----- ------------------- -------- -
------------- ------- ----- ----------- ------ --- -
----- -
---- -
--- -- ---------- -
--
----
-----------
----- -
-----
-
-
-
-
-
-
--查询需要一个参数 query，表示要搜索的字符串。查询会搜索前 10 个与查询字符串匹配的存储库，并返回这些存储库的 ID、名称、描述和所有者的登录名。
接下来，我们定义 App 组件，用于获取用户的查询字符串，并使用 useQuery hook 发布查询：
-- -------------------- ---- -------
-------- ----- -
----- ------- --------- - -------------
----- - ----- -------- ----- - - ---------------------- -
---------- - ----- -
---
------ -
-----
------ ----------- ------------- ------------- -- ------------------------- --
-------- - ------------ - ----- - ------------- - -
----
--------------------------- -- -
--- -------------------
--------------------------------- -- -----------------------
------------------------------
-----
---
-----
--
------
--
-
------ ------- ----App 组件渲染一个文本框，用户可以输入查询字符串。当用户输入时，我们使用 setQuery 更新组件状态。当用户提交查询时，我们使用 useQuery hook 发送 SEARCH_REPOS 查询，并使用变量 query 填充查询参数。useQuery hook 将返回查询结果，包括 data、loading 和 error。如果正在加载数据，我们将显示文本“Loading…”，如果出现错误，我们将显示错误信息。否则，我们将渲染所有匹配的存储库。
运行应用程序
现在应用程序就可以运行了。在终端中启动应用程序：
npm start
在浏览器打开 http://localhost:3000/，输入要搜索的查询字符串，然后单击“Enter”键即可查看搜索结果。
总结
GraphQL 是一种强大的数据查询语言和运行时，可以在前端开发中处理繁琐数据业务逻辑。它提供了精确查询、多个数据源、开发效率等优势。前端开发者可以使用 GraphQL 取代传统的 RESTful API，从而更加高效、明确地请求数据。
在本文中，我们使用 GraphQL 查询了 GitHub API 并显示了用户搜索结果的存储库列表。这个例子展示了 GraphQL 在实际应用中的使用，也让我们更好地理解了 GraphQL 的优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a8f32e48841e989454776e