Fastify 与 GraphQL 结合使用完整教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

前言

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

阅读全文

猜你喜欢

  • 如何在 Redux 中处理分页及数据加载

    在前端开发中，数据的分页及加载是一个经常需要面对的问题。Redux 作为前端应用状态管理器，可以很好地协调数据的传输和交互。在此，我们将会深入介绍如何在 Redux 中处理分页及数据加载，并提供一些示...

    19 天前
  • Enzyme 如何测试 React 组件中的表单数据

    在 React 应用程序的开发过程中，表单数据是非常常见的。为了保证应用程序的质量，我们需要对表单数据进行测试。Enzyme 是一个用于 React 应用程序的 JavaScript 测试工具，它提供...

    19 天前
  • 利用 REM 实现响应式字体大小控制的技巧

    在响应式设计中，如果你想要您的网站或应用程序能够自适应不同屏幕大小和设备类型，那么您需要能够控制文本的大小以适应各种视图。 在本文中，我们将介绍如何使用 REM 来自适应文本大小。

    19 天前
  • Docker 容器中运行 Oracle 数据库的方法和技巧

    介绍 Oracle 数据库是企业级数据库软件，它提供了完整且兼容的 SQL 数据库服务。Oracle 数据库的使用广泛，拥有天然优势，具有强大的大数据和高安全性特点。

    19 天前
  • 使用 Node.js 和 Express 构建 RESTful API 的最佳实践

    RESTful API 已经成为现代 Web 应用的标配，并且 Node.js 和 Express 正成为开发这类 API 的首选技术。尽管这两个工具的使用非常简单，但是在构建 RESTful API...

    19 天前
  • RxJS 中的过滤操作符详解

    RxJS 是一个基于响应式编程的 JavaScript 库，为 JavaScript 提供了一种函数响应式编程的思想。而在 RxJS 中，过滤操作符是非常常用的操作符之一。

    19 天前
  • Kubernetes 中容器网络使用 Calico 的实践

    在 Kubernetes 中，容器网络达到了一种独特的状态，它能够支持不同节点之间的容器和容器间通信。这使得将应用程序拆分为更小，更可管理和更可伸缩的组件变得更加容易。

    19 天前
  • Promise 异步编程的坑点及解决方案

    在前端开发中，异步编程是一个必不可少的技能。而 Promise 作为一种用于处理异步操作的API，它可以更好地组织和处理异步代码。 然而，在使用 Promise 进行异步编程的时候，往往会遇到各种坑点...

    19 天前
  • Fastify 与 Express 的区别调研

    前端领域中，Express 是一个非常受欢迎的 Node.js 框架，但是近年来出现了一个新的选择，那就是 Fastify。Fastify 是一个快速、低开销的 Node.js 框架，它具有很多优秀的...

    19 天前
  • Mocha 测试报告生成的最佳实践

    Mocha 是一个完善的 JavaScript 测试框架，具有简单、灵活、可靠的特点。在测试代码的同时，Mocha 还可以生成测试报告来帮助开发者更好地了解测试结果。

    19 天前
  • 有效地利用 Alt 标签提高网站无障碍性

    在现代数字化社会中，人们日常生活中已越来越多地依赖于互联网。然而，对于一些视力障碍者和其他残疾人来说，他们的访问体验可能会受到影响。为了满足广大用户的需求，网站无障碍性已成为一个重要的话题。

    19 天前
  • 如何使用 Deno 的 HTTP 模块来创建 HTTP 请求？

    Deno 是一个安全的 JavaScript 和 TypeScript 运行时环境，它内置了一些可用于处理 HTTP 请求和响应的模块。其中，HTTP 模块使得创建和发送 HTTP 请求变得非常简单和...

    19 天前
  • Headless CMS 技术在深度学习与神经网络领域的实践和应用

    随着人工智能技术在全球范围内的发展，深度学习和神经网络已成为人们越来越关注的方向。而 Headless CMS 技术则因其灵活性和可组合性，在这个领域中发挥了重要作用。

    19 天前
  • 初学 Hapi 应该注意的问题以及如何避免

    Hapi 是一种 Node.js web 框架，它提供了很多有用的功能来构建 Web 应用程序。 如果你正在学习 Hapi，你需要注意以下几个问题，以确保你的代码能够正常工作，并且可以在未来轻松维护。

    19 天前
  • 使用 MongoDB 管理分布式系统数据

    作为一种非关系型数据库，MongoDB 在处理分布式系统数据方面具有很大的优势。在本文中，我们将详细介绍如何使用 MongoDB 管理分布式系统数据，并为您提供深度和学习以及指导意义。

    19 天前
  • 在 React Native 项目中，使用 ESLint + Prettier 提高代码质量

    React Native 是一个非常流行的移动端应用开发框架，开发人员使用 JavaScript 开发应用，同时在许多方面具有原生性能优势。但是，如果我们在开发过程中忽略代码质量，可能会影响我们的项目...

    19 天前
  • 使用 Node.js 编写高效的 API 接口

    Node.js 是一种基于 JavaScript 运行时的开源、跨平台的编程语言，它已经成为了现代 Web 开发中的重要组成部分。特别是在最近的几年，Node.js 在 Web 开发中的应用越来越广泛...

    19 天前
  • Kubernetes 部署 Tomcat 的实现方法

    1. 概述 Kubernetes 是一个跨平台、可移植的容器编排和管理平台。通过 Kubernetes，可以实现快速部署、扩展和管理容器化应用程序。本文将介绍如何通过 Kubernetes 部署 To...

    19 天前
  • 如何在微信小程序中使用 Tailwind

    前言 随着前后端分离的应用不断增加，前端技术也在不断更新。Tailwind CSS 是一种高度可定制的 CSS 框架，它提供了各种工具类来帮助您快速创建优美的 UI。

    19 天前
  • 使用 React.js 实现 SPA 时遇到的常见错误及解决方法

    随着 Web 技术的发展，单页应用程序 (Single Page Application，简称 SPA) 越来越受到前端开发者的青睐。使用 React.js 可以方便地实现 SPA 的核心功能，包括组...

    19 天前

相关推荐

    暂无文章