GraphQL 是一种用于 API 的查询语言，前端开发人员可以使用它来获取特定数据。使用 GraphQL，开发人员可以减少 API 请求的数量，并避免过多的网络延迟，提高应用的性能。本文将详细介绍初学 GraphQL 的操作，帮助你快速上手使用。
GraphQL 的优势
在使用基于 REST 的 API 时，当需要获取特定数据时，通常需要向多个端点发送多个请求，这将导致网络负担增大，延迟等问题也会相应增加。使用 GraphQL 可以将这些请求转变为单个查询，并且可以快速筛选和获取需要的数据。GraphQL 的优点主要体现在以下几个方面：
- 精确控制数据的获取：GraphQL 可以精确控制需要获取的数据，避免了传统 API 中过多或不足的数据获取，减少了网络负载并提高了性能；
- 可以使用类型系统：GraphQL 可以使用类型系统，开发人员可以明确知道数据对象的结构，而不必解释 JSON 数据；
- 语言无关性：GraphQL 可以使用任何语言实现，包括 JavaScript、Java、Python 和 C# 等多种语言。
除此之外，GraphQL 还有很多其他的优势，例如：
- 支持多平台开发；
- 可以支持实时数据更新；
- 支持自定义指令等。
GraphQL 的基本语法
GraphQL 最基本的结构是一个“查询”，我们可以通过实现 GraphQL API 来定义和执行查询。GraphQL 查询包括以下几个部分：
-- - --- --- -
其中，查询是运行查询的名称，查询中的字段1、字段2是表示需要获取的数据。例如，获取某个 User 的名字、年龄和 email 等属性的查询语句可以如下所示：
-- -
---- -
----
---
-----
-
-在 GraphQL 中，查询是可以嵌套的，例如，获取某个 User 的名字、年龄和 email 属性以及它们的父列表项的情况可以如下所示：
-- -
---- -
----
---
-----
---- -
----
------
-
-
-GraphQL API 的实现
下面，我们将通过一个简单的示例来介绍如何实现 GraphQL API。
1. 安装包
在 Node.js 中，我们可以使用 Express 来实现 GraphQL API。我们需要安装以下核心包：
- -- ------- - ------- --- ------- ------- ------- ---------------
2. 实现 schema
我们使用 GraphQL schema 来定义 API 的数据。Schema 可以被认为是 API 的合同，它指定了客户端可以使用的查询字段，并指定了每个查询字段可以返回的数据。
----- - ------------------ -------------- ----------- ------------- - - -------------------
-- ------
----- -------- - --- -------------------
----- -------
------- -
--- - ----- ---------- --
----- - ----- ------------- --
---- - ----- ---------- --
------ - ----- ------------- -
-
---
-- --------------------- ---
----- ----- - -
- --- -- ----- ------ ---- --- ------ ------------- --
- --- -- ----- ------- ---- --- ------ -------------- --
--
-- ------------
----- ------ - --- ---------------
------ --- -------------------
----- --------
------- -
----- -
----- ---------
----- - --- - ----- ---------- - --
-------- --- - -- -- -- --------------- -- ------- --- ---
--
------ -
----- --- ----------------------
-------- -- -- -----
-
-
--
---
-------------- - -------以上代码中，UserType 定义了一个 User 类型，user 和 users 是查询。其中，user 接受一个 id 参数，通过 resolve 函数返回与指定 id 匹配的用户。而 users 查询返回所有的用户。
3. 创建 Express 中间件
我们将使用 Express 提供 GraphQL API 的查询服务。以下是如何配置应用程序：
----- ------- - ------------------- ----- ----------- - --------------------------- ----- ------ - ----------------------- ----- --- - ---------- ------------------- ------------- ------- --------- ---- ---- ---------------- -- -- ---------------- ------ -- --------------------------
在上面的代码中，我们引用了 express 和 express-graphql 包，创建了一个 Express 实例，然后添加了一个路由到 /graphql 上，将 schema 和 graphiql: true 传递给 GraphQL 中间件。其中 graphiql: true 参数表示我们希望使用 GraphiQL，这将是一个可交互的控制台，可用于在浏览器中测试 API。
最后，我们调用了 listen 方法来表示应用程序将在 4000 端口上启动。
4. 测试 GraphQL API
如果一切正常，打开浏览器并访问 http://localhost:4000/graphql，你将会看到 GraphiQL 工具。在控制台的左边编辑器中输入查询语句：
-- -
-------- -- -
----
---
-----
-
-在右边的控制台中，GraphQL API 将返回匹配的数据：
-
------- -
------- -
------- ------
------ ---
-------- -------------
-
-
-结论
本文介绍了 GraphQL 的优势以及 GraphQL 的基础语法和 API 的实现。使用 GraphQL，你可以轻松地从 API 中获取所需的数据，并可通过类型系统进行精确控制。在使用 GraphQL 时，你需要创建 schema，并在 JavaScript 环境中实现 GraphQL API。如果你想了解更多信息，请参阅官方文档：https://graphql.org/
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f703e5f55128102646766