Fastify 与 GraphQL 结合使用完整教程

前言

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 的类型,它拥有 idtitleauthor 字段,还包含一个 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 方法,该方法将在每个请求处理之前调用。该方法允许我们预处理请求并在根解析器中使用该数据。

在我们的根解析器中,我们将更新 bookbooks 方法来从数据库中获取数据。在 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