前端开发者需要掌握各种技术来构建应用程序。在 Web 应用程序中,构建可伸缩和高性能 API 是至关重要的。Fastify 是一个快速、轻量、易于使用,并且底层使用 Node.js 构建的 Web 框架。GraphQL 是一个API查询语言,可更好地定义API Schema以及提供给客户端灵活的查询机制。在本文中,我们将研究如何使用 Fastify 和 GraphQL 构建 API。
安装及基础知识
在本文中我们将建立一个简单的 API,它具有查询和保存图书的功能。要了解 Fastify 和 GraphQL 是如何工作的,我们需要掌握一些基本知识。
第一步是安装 Fastify 和 GraphQL 依赖。我们可以通过在终端中运行以下命令来安装它们:
npm install fastify --save npm install graphql --save
第二步是了解 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 界面上,您将看到一个类似控制台的用户界面。使用以下查询获取所有书籍:
{ books { id title author } }
这将返回一组 ID、标题和作者的书籍。您可以使用类似以下查询的查询:
{ book(id: "1") { title author } }
这将返回一本书的标题和作者,该书的 ID 为 1。您可以尝试与 addBook 变异器进行交互,向 API 添加新书。由于我们的代码仅为示例,您需要编写代码来将它们添加到数据库中。
结论
本文介绍了如何使用 Fastify 和 GraphQL 构建 API。我们了解了如何创建 Fastify 实例,定义 GraphQL Schema,创建 Fastify 路由以及如何进行查询。请记住,这只是 Fastify 和 GraphQL 的基本用法之一,您可以根据需求进行相应的修改。这一技能将帮助你更好的构建出支撑应用程序的高效API,进一步提升你的前端技能!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67027b2ad91dce0dc8478a1f