GraphQL 是一种用于 API 构建的查询语言。它允许客户端向服务器发送关于需要的数据的明确请求，并返回与请求匹配的精确数据。这种查询语言已经被广泛用于 Web 开发中，尤其是在构建单页面应用程序中。
在本文中，我们将探讨如何在 Fastify 应用程序中集成 GraphQL。Fastify 是一个快速、开源、基于 Node.js 的 Web 框架，它提供了一个低开销、高性能的路由和中间件解决方案。我们还将通过一个完整的示例来说明如何实现 GraphQL。
Fastify 与 GraphQL
Fastify 使用了一个强大的插件体系来扩展其核心功能。所以，与其他 Web 框架一样，Fastify 也提供了用于集成 GraphQL 的插件。我们将使用 Fastify GQL 插件，它是一个相对较新的插件（Fastify GQL 插件基于 mercurius@11.0.0）
下面是如何在 Fastify 应用程序中安装和使用 Fastify GQL 插件的示例代码：
-- -------------------- ---- -------
----- ------- - ---------------------
----- --- - -----------------------
----- ------ - -
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ -- -- ------ -------
-
--
--------------------- -
-------
---------
---
-------------------- ----- -------- -- -
-- ----- ----- ---
------------------- --------- -- ------------
---在上面的代码中，我们首先创建了一个 Fastify 实例，并引入了我们需要的两个包——fastify-gql 和 graphql。然后，我们定义了一个由 hello 字段组成的查询，并创建了一个名为 resolvers 的对象来解析查询。最后，我们使用 fastify.register() 方法将 GQL 插件注册到 Fastify 应用程序中。
示例：Fastify 应用程序中使用 GraphQL
在这个示例中，我们将创建一个 Fastify 应用程序，该应用程序将使用 GraphQL 查询来获取与用户相关的数据。我们将使用 Fastify GQL 插件来执行 GraphQL 查询，并使用 Apollo 客户端来测试和调试 GraphQL 查询。
请注意，这个示例仅涉及一个查询，并使用了一个假数据源来模拟真实的数据，以便更加实际地演示我们如何使用 GraphQL。
步骤 1：安装依赖项
首先，我们需要安装一些必要的依赖项。我们将需要安装以下依赖项：
- fastify
- fastify-gql
- graphql
- @apollo/client
我们可以使用 npm 命令来安装这些依赖项。在终端中，执行以下命令：
npm install fastify fastify-gql graphql @apollo/client
步骤 2：设置数据源
为了演示如何使用 GraphQL，我们需要一个数据源。在这个示例中，我们将使用以下假数据源：
const users = [
{id: "1", name: "Alice", email: "alice@example.com"},
{id: "2", name: "Bob", email: "bob@example.com"},
{id: "3", name: "Charlie", email: "charlie@example.com"}
];步骤 3：创建 GraphQL 查询
现在，我们将创建一个 GraphQL 查询，该查询将获取与指定用户 ID 关联的用户的名称和电子邮件地址。我们将查询保存到名为 users.graphql 的文件中。查询代码如下：
query GetUser($id: String!) {
user(id: $id) {
name
email
}
}在上面的查询中，我们定义了一个名为 GetUser 的 GraphQL 查询，并添加了变量 id。查询的实际执行将需要由客户端提供变量。在我们的情况下，我们将使用 Apollo 客户端来提供变量。
步骤 4：创建 Fastify 应用程序
现在，让我们创建一个 Fastify 应用程序，该应用程序将响应我们的 GraphQL 查询。我们将使用我们在步骤 2 中定义的假数据源来演示查询。以下代码将初始化应用程序和 Fastify GQL 插件：
-- -------------------- ---- -------
----- ------- - ---------------------
----- --- - -----------------------
----- - -------------------- - - ---------------------------------
----- -------- - -
---- ---- -
--- ------
----- ------
------ ------
-
---- ----- -
-------- --------- ----
-
--
----- --------- - -
------ -
----- -------- ----- -- -
------ --------------- -- ------- --- ----
-
-
--
----- ------ - ------------------------------- ------------
--------------------- -
-------
--------- ----
---
-------------------- ----- -------- -- -
-- ----- ----- ---
------------------- --------- -- ------------
---在上面的代码中，我们首先定义了一个名为 User 的类型，它由 id、name 和 email 字段组成。我们还定义了一个名为 Query 的类型，它通过 ID 字段返回一个用户。然后，我们为 GQL 插件创建了一个架构和解析器，并将其添加到 Fastify 应用程序中。
最后，我们在 Fastify 应用程序上启动了服务器。
步骤 5：使用 Apollo 客户端测试 GraphQL 查询
现在我们已经创建了 Fastify 应用程序，接下来让我们测试一下 GraphQL 查询。我们将使用 Apollo 客户端来测试查询。以下是一个例子，演示如何在我们的示例中使用 Apollo 客户端：
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- -----------------
----- ------ - --- --------------
---- --------------------------------
------ --- ---------------
---
----- ----- - ----
----- ------------ -------- -
-------- ---- -
----
-----
-
-
--
--------------
------
---------- - --- --- -
-------------- -- -
--------------------
-------------- -- -
---------------------
---在上面的代码中，我们使用 Apollo 客户端来执行 getUser 查询。我们还在变量中指定了 ID，以便从用户数组中检索一个用户。通过检查控制台，我们可以看到查询的结果。
结论
在本文中，我们了解了如何在 Fastify 应用程序中集成 GraphQL 来处理数据。我们深入探讨了如何使用 Fastify GQL 插件来注册架构和解析器，并编写了一个完整的示例来演示 Fastify 应用程序如何响应 GraphQL 查询。我们还介绍了如何使用 Apollo 客户端来测试和调试 GraphQL 查询。这个示例只是 GraphQL 的一个基本示例，它可以为我们提供更多的想象空间来探索使用 GraphQL 处理数据的其他用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e78d2e9a7045d0d6a68bc