前言
Fastify 是一个低开销、高性能的 Node.js Web 框架。它以其快速的 HTTP 解析器和路由速度而闻名，并且具有可扩展的插件架构。GraphQL 是一种新兴的 API 查询语言和运行时，它允许客户端指定他们需要哪些数据，使得 API 更加灵活和可扩展。
结合 Fastify 和 GraphQL 可以为你的前端应用程序提供更高效和灵活的 API。在本文中，我们将研究如何结合 Fastify 和 GraphQL 来构建高效灵活且易于维护的前端应用。
安装 Fastify 和 GraphQL
在开始之前，我们需要在本地安装 Fastify 和 GraphQL。我们可以使用 npm 或者 yarn 来安装。
# 使用 npm npm install fastify graphql # 使用 yarn yarn add fastify graphql
基础示例
首先，我们需要添加路由来处理 GraphQL 查询。Fastify 提供了很好的路由支持，我们可以使用 fastify-route 模块来添加路由。我们将创建一个简单的 GraphQL API 来返回一本书的信息。我们将使用以下模式来描述书：
type Book {
id: ID!
title: String!
author: String!
}我们将使用以下查询来获取图书信息：
query {
book(id: ID!) {
title
author
}
}现在，让我们来实现这个功能。在 app.js 文件中，我们将创建一个 Fastify 应用程序，并使用 fastify-graphql 插件来添加 GraphQL 支持。
-- -------------------- ---- -------
----- ------- - --------------------
-- -- ------- --
-------------------------------------------- -
------- -
---- ----- -
-------- ----- ----
-
---- ---- -
--- ---
------ -------
------- -------
-
--
---------- -
----- -- -- -- -- -
-- --------
------ -
---
------ ---- ---- -- --- -------
------- ------- --------
-
-
--
--------- ----
--
-------------------- --- -- -
-- ----- ----- ---
------------------- --------- -- ----------------------------------
--上面的代码中，我们将 GraphQL 的服务端模式定义在 schema 属性中。我们的模式定义包含一个名为 Book 的类型，它拥有 id、title 和 author 字段，还包含一个 book 域，它有一个 ID 参数，该参数是查询时传入的。book 域返回一个包含书信息的对象。
我们将根值 (rootValue) 设置为一个包含 book 局部方法的对象。Fastify-GraphQL 期望我们提供的根解析器对象是一个 JavaScript 对象，其中每个属性与模式中的根字段相对应。当我们发出查询请求时，Fastify-GraphQL 会根据查询的字段调用相应的局部方法。
在本例中，当我们查询 book 时，Fastify-GraphQL 将调用根解析器对象的 book 方法，并将查询中的 id 参数传递给它。book 方法返回一个对象，该对象包含图书信息。Fastify-GraphQL 会将该对象作为响应发送给客户端。
请注意，我们将 graphiql 属性设置为 true。这意味着我们在浏览器中可以打开 GraphiQL，一个交互式的 GraphQL IDE，可以在其中测试查询。现在打开浏览器并访问 http://localhost:8080/graphql。
您应该看到如下界面：
在图形化界面中，您可以输入查询并查看查询结果。让我们测试查询我们的图书：
query {
book(id: "1") {
title
author
}
}您应该看到以下结果：
{
"data": {
"book": {
"title": "The Lord of The Rings",
"author": "J.R.R. Tolkien"
}
}
}添加数据源
现在我们已经设置好了一个简单的 GraphQL 服务，但是我们的数据不是来自硬编码的对象。在现实生活中，我们的数据可能来自数据库或其他 API。好消息是，Fastify-GraphQL 允许我们使用任意数据源。
在这个示例中，我们将使用 MongoDB 作为数据源。我们将使用 fastify-mongodb 模块来连接 MongoDB。如果你还没有安装它，可以通过运行以下命令来安装它：
npm install fastify-mongodb
现在让我们创建一个 book 集合来存储我们的数据。
-- -------------------- ---- -------
----- - ----------- - - ------------------
----- --- - ---------------------------
----- ------ - --- ---------------- - ---------------- ---- --
----- -------- ------------- -- -
----- ----------------
----- -- - --------------------
----- ----------------------------
----- -----------------------------------
-
------ ------ ------
------- ------- -- -------
--
-
------ ---- --------- ------------
------- ------- ---- --- ----- -------
-
--
--------------------- -- --- ----
-
-- -----
---------------我们将使用以下查询查询书籍列表：
query {
books {
title
author
}
}现在，让我们更新我们的 GraphQL 模式以使用数据源。在 app.js 文件中，我们将使用 fastify-mongodb 模块来连接到 MongoDB。接下来，我们将定义一个全局 context 对象，我们将使用该对象从数据库中获取数据。最后，我们将更新获取图书列表的 book 域来从数据库中获取数据。
-- -------------------- ---- -------
----- - ----------- - - ------------------
----- --- - ---------------------------
----- ------ - --- ---------------- - ---------------- ---- --
----- -------- ------------- -- -
----- ----------------
----- -- - --------------------
----- ----------------------------
----- -----------------------------------
-
------ ------ ------
------- ------- -- -------
--
-
------ ---- --------- ------------
------- ------- ---- --- ----- -------
-
--
--------------------- -- --- ----
-
-- ------
----- -------- - -
---- ---- -
---- ---
------ -------
------- -------
-
-
-- ------
----- --------- - -
---- ----- -
------ ------
-------- ----- ----
-
-
-- -- ------- --
-------------------------------------------- -
------- -
-----------
------------
--
----- ------- --------- -
-- ------
----- ----------------
----- -- - --------------------
------ -
--
-
--
---------- -
------ ----- -- -- -
----- ----- - ----- -----------------------------------------------
------ -----
--
----- ----- -- -- -- -- -
----- ---- - ----- ---------------------------------------- ---- --- ------------ --
------ ----
-
--
--------- ----
--
-------------------- --- -- -
-- ----- ----- ---
------------------- --------- -- ----------------------------------
--在上面的代码中，我们将 Book 类型和 Query 类型定义添加到模式中。我们还定义了一个 context 方法，该方法将在每个请求处理之前调用。该方法允许我们预处理请求并在根解析器中使用该数据。
在我们的根解析器中，我们将更新 book 和 books 方法来从数据库中获取数据。在 books 方法中，我们使用 async 将查询异步化。我们使用 MongoDB 驱动程序中的 find 方法检索所有数据，并使用 toArray 方法将其转换为数组。在 book 方法中，我们使用 findOne 方法检索数据。请注意，我们在使用 context 对象时需要使用 await。
添加修改和删除
到目前为止，我们已经演示了如何从 MongoDB 中获取数据。但是，我们的应用程序可能需要允许用户上传、修改和删除数据。在本节中，我们将添加修改图书的功能。我们将使用以下查询来更新图书：
-- -------------------- ---- -------
-------- -
-----------
--- ---
------ -------
------- -------
- -
-----
------
-
-首先，让我们添加一个新的插件来解析 GraphQL 中的 mutation 语句。我们将使用 fastify-formbody 来解析表单数据中的请求体，并使用 fastify-gql-upload 插件来支持文件上传。如果您还没有安装它们，可以通过运行以下命令来安装它们：
npm install fastify-formbody fastify-gql-upload
-- -------------------- ---- -------
----- ------- - --------------------
-- ------------
---------------------------------------------
-- --------
-----------------------------------------------
-- -- ------- --
-------------------------------------------- -
------- ------
----- ------- --------- -
-- ---
--
---------- -
-- ---
----------- ----- -- --- ------ ------ -- -- -
----- ----------
--------------------
------------ ---- --- ------------ -- - ----- - ------ ------ - --
----- ---- - ----- ----------
--------------------
---------- ---- --- ------------ --
-- ----------
----------------------------- - ------------ ---- --
------ ----
-
--
--------- ----
--在上面的代码中，我们已经添加了 fastify-formbody 插件和 fastify-gql-upload 插件。现在，我们的应用程序支持 POST 请求中的表单提交，并支持文件上传。
我们将添加一个名为 pubsub 的新对象来处理发布/订阅功能。我们将使用 graphql-subscriptions 模块来实现我们的发布/订阅功能。安装它：
npm install graphql-subscriptions
更新我们的代码：
-- -------------------- ---- -------
----- - ------ - - --------------------------------
----- ------ - --- --------
-- ---- ------- ----
----- ---------------- - -
---- ------------ -
------------ ----
-
-
-- -- ------- --
-------------------------------------------- -
------- -
-----------
------------
---------------
-------------------
--
-- ---
---------- -
-- ---
--
-------------- -
-- -- ----------- --
------------ -
---------- -- -- -------------------------------------
-
--
--------- ----
--在上面的代码中，我们创建了一个新的 Subscription 类型，并将其添加到我们的模式中。我们还更新了根解析器对象的 updateBook 方法来调用 MongoDB 的 updateOne 方法更新数据库中的书籍信息。我们使用 pubsub.publish 方法在更新数据库后发布更新的数据。您应该理解这个代码而不是抄下去。
最后，还需要更新 index.js 文件来检索我们将使用的环境变量。创建一个 .env 文件并将以下内容添加到其中：
MONGODB_URL=mongodb://localhost:27017
此将用于指定 MongoDB 的 URL。更新 index.js 文件如下：
-- -------------------- ---- -------
--------------------------
----- ------- - --------------------
-- ------------
---------------------------------------------
-- --------
-----------------------------------------------
----- - ------ - - --------------------------------
----- ------ - --- --------
-- -- -------
-------------------------------------------- -
---- ------------------------
---------------- ----
--
-- -- ------- ------------------------
------------------- -- -- -
----- -----------------------------
---------------------- -- ---------
--
-- -- ------- --
-------------------------------------------- -
------- -
-----------
------------
---------------
-------------------
--
----- ------- --------- -
------ -
--- ---------------------------
-
--
---------- -
------ ----- -- -- -
----- ----- - ----- -----------------------------------------------
------ -----
--
----- ----- -- -- -- -- -
----- ---- - ----- ---------------------------------------- ---- --- ------------ --
------ ----
--
----------- ----- -- --- ------ ------ -- -- -
----- ----------
--------------------
------------ ---- --- ------------ -- - ----- - ------ ------ - --
----- ---- - ----- ----------
--------------------
---------- ---- --- ------------ --
-- ----------
----------------------------- - ------------ ---- --
------ ----
-
--
-------------- -
------------ -
---------- -- -- -------------------------------------
-
--
--------- ----
--
-- ----
-------------------- --- -- -
-- ----- ----- ---
------------------- --------- -- ----------------------------------
--在更新的代码片段中，我们已经更新了 fastify-mongodb 中连接 MongoDB 的路径。此外，我们还将 fastify-mongodb 添加到 Fastify 实例中。在 ready 事件中，我们使用 fastify.mongoClient.connect 方法连接到 MongoDB。在连接成功后，我们将从 MongoDB 中获取 db 对象，并在图形化界面中执行我们的查询。
结论
Fastify 和 GraphQL 是两个强大的技术，它们可以使我们的应用程序更加高效和灵活。使用 Fastify 和 GraphQL 结合，可以极大地提高我们的应用程序的性能和可维护性。在本文中，我们已经详细地介绍了如何结合 Fastify 和 GraphQL，以便您能够轻松地生成丰富、高效和灵活的 API。希望本文能帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6718ccebad1e889fe22e4e7e