前端开发者需要掌握各种技术来构建应用程序。在 Web 应用程序中，构建可伸缩和高性能 API 是至关重要的。Fastify 是一个快速、轻量、易于使用，并且底层使用 Node.js 构建的 Web 框架。GraphQL 是一个API查询语言，可更好地定义API Schema以及提供给客户端灵活的查询机制。在本文中，我们将研究如何使用 Fastify 和 GraphQL 构建 API。
安装及基础知识
在本文中我们将建立一个简单的 API，它具有查询和保存图书的功能。要了解 Fastify 和 GraphQL 是如何工作的，我们需要掌握一些基本知识。
第一步是安装 Fastify 和 GraphQL 依赖。我们可以通过在终端中运行以下命令来安装它们：
--- ------- ------- ------ --- ------- ------- ------
第二步是了解 GraphQl。GraphQL 是一种用于编写 API 查询的查询语言。它包括一种定义 Schema 的方式和一种定义查询的方式。Schema 定义了所有可用的对象类型以及它们之间的关系。查询定义了我们从数据中请求的数据类型及其属性。
第三步是了解 Fastify。Fastify 是一个 Web 应用程序框架，它基于 Express 框架。它特别适合构建高性能 Web 应用程序。
创建API
我们将从创建 Fastify 实例开始。在文件 index.js 中输入以下代码：
----- ------- - -------------------- ------- ---- ---
-------------------- ----- -- -
-- ----- -
-----------------------
----------------
-
------------------------ --------- -- -----------------------------------
---使用快速工厂方法，创建一个实例并在指定端口（3000）和端口上监听。配置选项 logger true 用于在控制台上打印有意义的信息和错误。
定义 GraphQL Schema
为了定义 GraphQL Schema，我们可以使用 graphql-js 库。在 index.js 文件中，对 graphql-js 库进行导入并定义类型，输入类型和查询类型。以下是我们应用程序的示例 Schema：
----- -
------------------
--------------
-----------
--------------
------------
---------------
- - -------------------
----- -------- - --- -------------------
----- -------
------- -- -- --
--- - ----- ------------- --
------ - ----- ------------- --
------- - ----- ------------- --
---
---
----- --------- - --- -------------------
----- ----------------
------- -
----- -
----- ---------
----- -
--- - ----- ------------- --
--
--------------- ----- -
-- ---- -- --- ---- ---- -- -- ----- ------
--
--
------ -
----- --- ----------------------
--------------- ----- -
-- ---- -- --- ---- ---- -- -- ----- ------
--
--
--
---
----- -------- - --- -------------------
----- -----------
------- -
-------- -
----- ---------
----- -
------ - ----- --- ----------------------------- --
------- - ----- --- ----------------------------- --
--
--------------- ----- -
-- ---- -- --- ---- -- -- -- ----- ------
--
--
--
---
-------------- - --- ---------------
------ ----------
--------- ---------
---上面的代码中，我们定义了一个名为 BookType 的对象类型，它包含图书的三个属性。然后，我们定义了 RootQuery 类型，包含两个查询：book 和 books。这两个查询接受一个 ID 参数，并利用 resolve 函数来获取数据。最后，我们定义了一个 Mutation 类型，它包含一个 addBook 变异器，可向数据库或其他源添加新书籍，并返回新添加的书籍。
创建 Fastify 路由
现在我们了解了如何定义 GraphQL Schema，如何在 Fastify 中创建一个实例，以及如何定义路由。我们需要使用 fastify-gql 插件来定义路由，插件提供了将 GraphQL Schema 与路由进行交互的功能。在 index.js 文件中，添加以下代码：
----- -------------- - -----------------------
----- ------ - --------------------
-------------------------------- -
------- -------
--------- -----
---
-------------------- ----- -- -
-- ----- -
-----------------------
----------------
-
------------------------ --------- -- -----------------------------------
---上面的代码中，我们首先导入 fastify-gql 插件和我们先前定义的 Schema。然后，我们在 Fastify 实例上注册路由，指定 schema 和 graphiql 选项。graphiql 选项提供了一个 Web 接口，您可以使用该接口查看和测试 API 并轻松进行查询。最后，我们通过 listen 方法来启动服务。
查询
启动服务器后，现在我们可以通过 localhost:3000/graphql 进行查询。在 graphiql 界面上，您将看到一个类似控制台的用户界面。使用以下查询获取所有书籍：
-
----- -
--
-----
------
-
-这将返回一组 ID、标题和作者的书籍。您可以使用类似以下查询的查询：
-
-------- ---- -
-----
------
-
-这将返回一本书的标题和作者，该书的 ID 为 1。您可以尝试与 addBook 变异器进行交互，向 API 添加新书。由于我们的代码仅为示例，您需要编写代码来将它们添加到数据库中。
结论
本文介绍了如何使用 Fastify 和 GraphQL 构建 API。我们了解了如何创建 Fastify 实例，定义 GraphQL Schema，创建 Fastify 路由以及如何进行查询。请记住，这只是 Fastify 和 GraphQL 的基本用法之一，您可以根据需求进行相应的修改。这一技能将帮助你更好的构建出支撑应用程序的高效API，进一步提升你的前端技能！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67027b2ad91dce0dc8478a1f