GraphQL 是一种用于 API 开发的查询语言和运行时环境。它被广泛用于构建现代 Web 应用程序，因为它允许客户端精确地请求它需要的数据，而不必依赖于服务器端提供的固定数据结构。这种灵活性使得 GraphQL 适用于各种类型的应用程序，从简单的静态网站到大型的企业级应用。
本文将介绍如何将 GraphQL 集成到现有的 Web 应用程序中。我们将讨论如何安装和配置 GraphQL，如何定义和执行查询，以及如何将 GraphQL 与其他技术（如 React 和 Node.js）集成。我们还将提供一些示例代码，以便您可以快速开始构建自己的 GraphQL 应用程序。
安装和配置 GraphQL
GraphQL 可以通过 npm 包进行安装。在终端中输入以下命令即可安装：
npm install graphql
安装完成后，你需要创建一个 GraphQL 实例。以下是一个简单的示例：
-- -------------------- ---- -------
----- - -------------- ------------------ ------------- - - -------------------
----- ------ - --- ---------------
------ --- -------------------
----- -------------
------- -
-------- -
----- --------------
-------- -- -- ------ -------
--
--
---
---这个例子创建了一个名为 HelloWorld 的 GraphQL 查询，它只有一个字段 message，返回字符串 "Hello World"。现在我们已经创建了一个 GraphQL 实例，我们需要将其与我们的 Web 应用程序集成。
将 GraphQL 集成到 Web 应用程序中
要将 GraphQL 集成到 Web 应用程序中，我们需要一个 GraphQL 服务器，它将处理客户端发出的查询并返回相应的数据。有许多不同的 GraphQL 服务器可供选择，包括 Apollo Server、Express GraphQL 和 Yoga。
以下是一个使用 Apollo Server 的示例：
-- -------------------- ---- -------
----- - ------------ - - -------------------------
----- - -------------- ------------------ ------------- - - -------------------
----- ------ - --- ---------------
------ --- -------------------
----- -------------
------- -
-------- -
----- --------------
-------- -- -- ------ -------
--
--
---
---
----- ------ - --- -------------- ------ ---
----------------------- --- -- -- -
------------------- ----- -- ---------
---这个例子创建了一个 Apollo Server 实例，它使用我们之前创建的 GraphQL 实例作为其模式。现在，我们可以向服务器发送查询并获得响应。
以下是一个使用 fetch 发送查询的示例：
fetch('http://localhost:4000/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: '{ message }' }),
})
.then((res) => res.json())
.then((res) => console.log(res.data.message));这个例子发送了一个查询，请求 message 字段的值。服务器将返回一个包含该值的响应。现在我们已经成功地将 GraphQL 集成到我们的 Web 应用程序中，我们可以开始定义和执行更复杂的查询。
定义和执行查询
GraphQL 查询由字段和参数组成。每个字段都有一个名称和一个类型，并且可以包含参数，这些参数可以用来过滤和排序数据。以下是一个包含参数的查询的示例：
{
books(author: "J.K. Rowling") {
title
year
}
}这个查询请求名为 books 的字段，该字段接受一个名为 author 的参数。该查询将返回所有由 J.K. Rowling 写的书的标题和出版年份。现在我们已经定义了查询，我们需要在服务器上执行它。
以下是一个使用 Apollo Client 执行查询的示例：
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- -----------------
----- ------ - --- --------------
---- -------------------------
------ --- ----------------
---
------
--------
------ ----
-
------------- ----- --------- -
-----
----
-
-
--
--
----------- -- -----------------------------这个例子使用 Apollo Client 发送查询，并在收到响应后将结果打印到控制台。现在我们已经成功地定义和执行了查询，我们可以开始将 GraphQL 与其他技术集成。
将 GraphQL 与其他技术集成
GraphQL 可以与许多其他技术集成，包括 React、Node.js 和 MongoDB。以下是一个使用 React 和 Apollo Client 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- ------------- -------------- ---- -------- - ---- -----------------
----- ------ - --- --------------
---- -------------------------
------ --- ----------------
---
----- --------- - ----
-
------------- ----- --------- -
-----
----
-
-
--
-------- ----- -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
---------------------- -- -
---- -----------------
---------------------
------------------
------
---
------
--
-
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--这个例子使用 React 和 Apollo Client，从服务器获取 J.K. Rowling 写的所有书的标题和出版年份，并将其显示在页面上。现在我们已经成功地将 GraphQL 与其他技术集成，我们可以开始构建自己的 GraphQL 应用程序。
结论
GraphQL 是一种强大的查询语言和运行时环境，它可以帮助我们构建现代 Web 应用程序。本文介绍了如何将 GraphQL 集成到现有的 Web 应用程序中，包括安装和配置 GraphQL、定义和执行查询以及将 GraphQL 与其他技术集成。我们还提供了一些示例代码，以便您可以快速开始构建自己的 GraphQL 应用程序。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6743fe92f3dd6530329fbe68