前言
Fastify 是一个低开销、高性能的 Node.js Web 框架。它以其快速的 HTTP 解析器和路由速度而闻名,并且具有可扩展的插件架构。GraphQL 是一种新兴的 API 查询语言和运行时,它允许客户端指定他们需要哪些数据,使得 API 更加灵活和可扩展。
结合 Fastify 和 GraphQL 可以为你的前端应用程序提供更高效和灵活的 API。在本文中,我们将研究如何结合 Fastify 和 GraphQL 来构建高效灵活且易于维护的前端应用。
安装 Fastify 和 GraphQL
在开始之前,我们需要在本地安装 Fastify 和 GraphQL。我们可以使用 npm
或者 yarn
来安装。
- -- --- --- ------- ------- ------- - -- ---- ---- --- ------- -------
基础示例
首先,我们需要添加路由来处理 GraphQL 查询。Fastify 提供了很好的路由支持,我们可以使用 fastify-route
模块来添加路由。我们将创建一个简单的 GraphQL API 来返回一本书的信息。我们将使用以下模式来描述书:
---- ---- - --- --- ------ ------- ------- ------- -
我们将使用以下查询来获取图书信息:
----- - -------- ---- - ----- ------ - -
现在,让我们来实现这个功能。在 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
。
您应该看到如下界面:
在图形化界面中,您可以输入查询并查看查询结果。让我们测试查询我们的图书:
----- - -------- ---- - ----- ------ - -
您应该看到以下结果:
- ------- - ------- - -------- ---- ---- -- --- ------- --------- ------- -------- - - -
添加数据源
现在我们已经设置好了一个简单的 GraphQL 服务,但是我们的数据不是来自硬编码的对象。在现实生活中,我们的数据可能来自数据库或其他 API。好消息是,Fastify-GraphQL 允许我们使用任意数据源。
在这个示例中,我们将使用 MongoDB 作为数据源。我们将使用 fastify-mongodb
模块来连接 MongoDB。如果你还没有安装它,可以通过运行以下命令来安装它:
--- ------- ---------------
现在让我们创建一个 book
集合来存储我们的数据。
----- - ----------- - - ------------------ ----- --- - --------------------------- ----- ------ - --- ---------------- - ---------------- ---- -- ----- -------- ------------- -- - ----- ---------------- ----- -- - -------------------- ----- ---------------------------- ----- ----------------------------------- - ------ ------ ------ ------- ------- -- ------- -- - ------ ---- --------- ------------ ------- ------- ---- --- ----- ------- - -- --------------------- -- --- ---- - -- ----- ---------------
我们将使用以下查询查询书籍列表:
----- - ----- - ----- ------ - -
现在,让我们更新我们的 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
插件来支持文件上传。如果您还没有安装它们,可以通过运行以下命令来安装它们:
--- ------- ---------------- ------------------
----- ------- - -------------------- -- ------------ --------------------------------------------- -- -------- ----------------------------------------------- -- -- ------- -- -------------------------------------------- - ------- ------ ----- ------- --------- - -- --- -- ---------- - -- --- ----------- ----- -- --- ------ ------ -- -- - ----- ---------- -------------------- ------------ ---- --- ------------ -- - ----- - ------ ------ - -- ----- ---- - ----- ---------- -------------------- ---------- ---- --- ------------ -- -- ---------- ----------------------------- - ------------ ---- -- ------ ---- - -- --------- ---- --
在上面的代码中,我们已经添加了 fastify-formbody
插件和 fastify-gql-upload
插件。现在,我们的应用程序支持 POST
请求中的表单提交,并支持文件上传。
我们将添加一个名为 pubsub
的新对象来处理发布/订阅功能。我们将使用 graphql-subscriptions
模块来实现我们的发布/订阅功能。安装它:
--- ------- ---------------------
更新我们的代码:
----- - ------ - - -------------------------------- ----- ------ - --- -------- -- ---- ------- ---- ----- ---------------- - - ---- ------------ - ------------ ---- - - -- -- ------- -- -------------------------------------------- - ------- - ----------- ------------ --------------- ------------------- -- -- --- ---------- - -- --- -- -------------- - -- -- ----------- -- ------------ - ---------- -- -- ------------------------------------- - -- --------- ---- --
在上面的代码中,我们创建了一个新的 Subscription
类型,并将其添加到我们的模式中。我们还更新了根解析器对象的 updateBook
方法来调用 MongoDB 的 updateOne
方法更新数据库中的书籍信息。我们使用 pubsub.publish
方法在更新数据库后发布更新的数据。您应该理解这个代码而不是抄下去。
最后,还需要更新 index.js
文件来检索我们将使用的环境变量。创建一个 .env
文件并将以下内容添加到其中:
-------------------------------------
此将用于指定 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