在现代前端开发中，前后端分离的架构已经成为了主流。而在后端开发领域中，Fastify 已经成为了一个备受欢迎的轻量级 Web 框架。
同时，GraphQL 也成为了一个备受瞩目的数据查询语言。它的优点在于它能够提供精确的数据返回，并且支持客户端对于数据的查询和变换。
在本文中，我们将介绍如何使用 Fastify 来搭建一个 GraphQL 服务，并通过一些实际的案例来演示如何正确地集成这两个技术。
准备
首先，我们需要确保已经在本地安装了 node 和 npm。当然，我们还需要安装 Fastify 和 GraphQL 依赖：
npm install fastify graphql --save
案例
在本文中，我们将通过一个简单的图书管理系统来说明如何集成 Fastify 和 GraphQL。我们希望能够提供一些基本的 CRUD 操作，如添加、删除和更新图书。同时，我们也希望能够查询图书列表中的所有项以及根据 ID 查询单个图书。
我们先来定义一个 Book 类型，用于描述一本图书：
-- -------------------- ---- -------
----- -
------------------
--------------
-----------
- - -------------------
----- -------- - --- -------------------
----- -------
------- -
------ - ----- ------------- --
------- - ----- ------------- --
------ - ----- ---------- --
--
---然后，我们需要一些假数据来填充我们的数据库，这里我们举例用了一个 books 数组：
const books = [
{
title: "The Cerulean Sea",
author: "T.J. Klune",
pages: 400,
},
//...
];添加图书
首先，我们需要创建一个 mutation 类型，用于添加新图书：
-- -------------------- ---- -------
----- -
---------------
- - -------------------
----- --------------- - -
----- ---------
----- -
------ - ----- --- ----------------------------- --
------- - ----- --- ----------------------------- --
------ - ----- --- -------------------------- --
--
--------------- ----- -
----- - ------ ------- ----- - - -----
----- ------- - - ------ ------- ----- --
--------------------
------ --------
--
--这里我们使用了一个函数来处理添加图书的操作，将新的图书对象插入到 books 数组中。
删除图书
接下来，我们需要创建一个 mutation 类型，用于删除某个图书。这里我们假设我们可以通过序号来唯一确定一个图书。
-- -------------------- ---- -------
----- ------------------ - -
----- ---------
----- -
--- - ----- --- -------------------------- --
--
--------------- ----- -
----- - -- - - -----
----- ----- - -------------------- -- ------- --- ----
-- ------ --- --- -
----- ------------- - ------------------- ---
------ ------------
- ---- -
----- --- --------- ---- ----- ---- -- --------
-
--
--这里我们使用了 JavaScript 数组函数 findIndex() 和 splice() 来删除图书对象。
更新图书
我们还需要一个 mutation 类型，用于更新某个图书的信息：
-- -------------------- ---- -------
----- ------------------ - -
----- ---------
----- -
--- - ----- --- -------------------------- --
------ - ----- ------------- --
------- - ----- ------------- --
------ - ----- ---------- --
--
--------------- ----- -
----- - -- - - -----
----- ----- - -------------------- -- ------- --- ----
-- ------ --- --- -
----- -------------- - ------------------- ---
----- ------- - - ---------------- ------- --
--------------------
------ --------
- ---- -
----- --- --------- ---- ----- ---- -- --------
-
--
--这里我们使用了展开运算符和对象解构来更新 book 对象，并使用 push() 来将新的图书放回数组中。
查询
我们还需要创建一个查询操作，通过 ID 查询单个图书：
-- -------------------- ---- -------
----- -
----------
- - -------------------
----- ------------ - -
----- ---------
----- -
--- - ----- --------- --
--
--------------- ----- -
----- - -- - - -----
----- ---- - --------------- -- ------- --- ----
------ -----
--
--这里我们使用了数组的 find() 来查找对应的图书。
我们还需要一个查询操作，用于查询所有图书：
const GetAllBooksQuery = {
type: new GraphQLList(BookType),
resolve(parent, args) {
return books;
},
};集成 Fastify
现在我们已经完成了 GraphQL 建模，下一步就是将其与 Fastify 集成。
我们需要在 Fastify 应用程序中创建一个 GraphQL 端点。我们可以直接使用 graphqlHTTP 中间件，或者实现一个自定义的插件。
这里我们使用第一种方法，安装 graphqlHTTP 并将其挂载到 Fastify 实例的路由中：
const fastify = require('fastify')();
const { graphqlHTTP } = require('express-graphql');
fastify.register(graphqlHTTP({
schema: schema,
graphiql: true,
}));这里，我们将 schema 传递给了 graphqlHTTP 中间件，以便它可以自动解析我们的查询和 mutation 操作。此外，我们还通过 graphiql: true 开启了 GraphiQL 交互式查询界面，这将使我们能够更轻松地测试我们的 GraphQL 应用程序。
最后，我们需要在本地端口上启动应用程序：
fastify.listen(3000, function (err, address) {
if (err) {
console.error(err);
process.exit(1);
}
console.log(`Server running on ${address}`);
});测试应用程序
现在我们已经完成了快速集成示例的所有步骤。我们可以在浏览器中打开 http://localhost:3000，并尝试使用 GraphiQL 工具来测试我们的应用程序。
例如，我们可以使用以下查询来获取所有图书：
{
getAllBooks {
title
author
pages
}
}或者我们可以创建一个新的图书对象：
mutation {
addBook(title: "new book", author: "author", pages: 100) {
title
author
pages
}
}总结
在本文中，我们演示了如何使用 Fastify 和 GraphQL 创建一个简单的图书管理应用程序。我们学习了如何定义 mutation 和 query 操作，并将其与 Fastify 集成到一起。希望这个示例可以帮助你理解如何正确地使用这些工具来构建网络应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b3ade968c7c53b0d955ef