GraphQL 是一种用于从服务器获取数据的新兴标准，它允许前端开发人员查询和获取所需的数据，避免过多数据的传输和存储。在许多应用程序中，前端通常需要从服务器获取不同类型的数据，为了避免大量繁琐的网络请求和数据处理，可以使用 GraphQL 进行数据转换。本文将介绍如何使用 GraphQL 转换数据格式的步骤和涉及的相关技术。
什么是 GraphQL？
GraphQL 是一种查询语言，用于 API 和数据查询。与传统的 REST API 相比，GraphQL 具有更好的灵活性和可扩展性。实际上，GraphQL 允许客户端指定所需的数据和格式，从而减少需要传输的数据量和减轻服务器的负担。GraphQL API 还可以自动生成文档和客户端 SDK。
GraphQL 和 REST 的比较
GraphQL 和 REST 都是用于创建 API 的技术，但存在几个重要的区别。
精细的数据获取
GraphQL 允许客户端查询一个或多个数据集，而不需要多个 API 调用，从而减少了延迟和传输的数据量。REST API 缺乏这种优化，不能适应多个数据点的合并。
自我描述文档
GraphQL API 具有自我描述的能力。使用 GraphQL 的系统可以自动生成 API 文档、结构和类型，从而让开发人员更容易地理解 API 的功能和方法。
要求单一路径
REST API 具有单一资源路径的限制。这意味着每个资源都必须指定一个单独的 URL 路径。GraphQL API 不需要遵循这个规则，它可以获取整个图数据库中的任何数据。
过度抽象
GraphQL 在抽象问题时确实有优点，但它可能会变得过于抽象。GraphQL 的查询语言可以通过类型和对象关联实现复杂查询，这会导致查询增加，可能会使得其在性能和复杂性方面受到挑战。
步骤 1：创建 GraphQL API
首先，你需要创建一个 GraphQL API，这可以通过以下步骤完成：
1.在服务器端安装 GraphQL 库：npm install graphql
2.创建一个 schema 文件，它定义了查询 API 可以访问的数据类型和相关的字段。
3.使用 GraphQL 的模块来定义 API 的 endpoint。例如，在 Node.js 中，Express 框架具有 graphqlHTTP 模块来便于 GraphQL API 的 endpoint 的设置。
以下是一个简单的 Node.js 示例，说明如何使用 GraphQL 和 Express 构建一个 API：
-- -------------------- ---- -------
----- ------- - ------------------
----- ------------- - --------------------------
----- ------------- - ------------------
-- -- ------
----- ------ - -------------
---- ---- -
----- -------
---- ----
-
---- ----- -
----- -----
-
--
-- ---------------------------------
----- ------ - -
----- -
----- -------
---- ---
--
-
-- ------- ------------
----- --------- - -
----- -- -- -
------ -----------
--
-
-- -- ------- --- - --------
----- --- - ---------
--------
-----------
-------------
-------
----------
--------- -----
--
-
----------------
---------------------- ---- ---------现在，当你打开浏览器并访问 http://localhost:4000/graphql 时，你将看到一个可以用于测试和调试该 API 的 GraphiQL 页面。
步骤 2：编写 GraphQL 查询
下一步是编写 GraphQL 查询。查询可以使用 GraphiQL 中提供的工具执行。查询通常使用 GraphQL 的查询语言来实现，该查询语言基于 JavaScript，并具有自己的类型和表达语法。
以下是一个简单的 GraphQL 查询示例：
query {
user {
name
}
}步骤 3：测试 GraphQL 查询
现在，你可以使用 GraphiQL 中的工具来测试查询。基于在第一步中定义的 schema 和数据源，您将能够测试该 API。执行查询后，它将返回一个 JSON 结构，其中包含所请求的数据。
例如，以下是上面示例查询的结果：
{
"data": {
"user": {
"name": "Jake"
}
}
}步骤 4：执行查询并更新数据格式
一旦你成功地使用 GraphiQL 测试了你的 GraphQL API 并获得了所需的数据，就可以通过在前端应用程序中使用该查询来自动获取必要的数据。然后，您可以更新该数据以更方便的格式进行呈现。
例如，假设你需要从接口中获取数据并将其转换为列表格式，你可以按照以下步骤操作：
1.调用 GraphQL 查询以获取数据
-- -------------------- ---- -------
----- ----- - -
----- -
---- -
----
-
-
-
----------------- -
------- -------
-------- -
--------------- -------------------
--------- -------------------
--
----- ------------------------
--
----------- -- -----------
----------- -- -
--------------------------
--这将打印出 { name: 'Jake' }。
2.将用户数据转换为所需的列表格式
const userList = Object.keys(res.data).map((key) => {
return {...res.data[key]}
})这将创建一个包含获取到的数据的列表。
最终结果将是：
[ { name: 'Jake' } ]结论
GraphQL 提供了一种更灵活和精确地处理数据的方法。使用 GraphQL 的主要优势是避免了过多的网络请求和数据传输，从而极大地提高了 API 的性能。对于前端开发人员，GraphQL 还提供了一种更方便且自我描述的方式来管理和使用 API。此外，GraphQL 的可扩展性和可移植性也使其成为构建大型应用程序的理想技术。
在今天，越来越多的团队选择使用 GraphQL，而不是 REST API，来处理其数据。学会如何使用 GraphQL 可以为你的职业生涯增加优势，并为您的应用程序提供更快，更智能的数据管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ff972eedcc8a97c90c29a