在前端开发中，API 是非常重要的一环。GraphQL 作为一种新兴的 API 查询语言，正逐渐成为前端开发者的首选。而 Fastify 则是一款快速、低开销和高效的 Web 框架，与 GraphQL 相结合可以为前端应用提供强大的后台支持。本篇文章将介绍如何基于 Fastify 开发 GraphQL API，代码实现将使用 JavaScript。
步骤一：搭建 Fastify 开发环境
首先需要创建一个新的 Node.js 项目，使用 npm 或 yarn 初始化一个 package.json 文件。接着安装 Fastify 以及一些必要的插件：
--- ------- ------- ------------ ----------- -------
上面的命令会安装 Fastify 框架、Cors 插件和 GraphQL 相关的 npm 包。接着在项目中创建 server.js（或任意其他文件名）文件，并写入以下内容：
----- ------- - ---------------------
----- ---- - ------------------------
----- --- - -----------------------
-----------------------
--------------------- -
------- --- -- ----- ------- - ------
--------- ---- -- ---- -------- ---
---
-------------------- -------- ----- -------- -
-- ----- -
-------------------
----------------
-
------------------- ------- -- -------------
---这份代码做了以下几件事：
- 引入 fastify 的模块
- 调用 fastify() 创建一个实例
- 引入 cors 和 gql 插件
- 注册这两个插件到 fastify 实例中
- 调用 fastify.listen 监听端口。在这个例子中我们监听了 3000 端口
稍后我们再通过命令行启动这个项目，现在先不必担心。
步骤二：编写 GraphQL 的 Schema
Schema 是定义对象类型、查询类型和 mutation 的规范，它是 GraphQL API 的核心。我们需要在 server.js 文件中编写一下用户和文章的数据类型：
----- - ----------- - - -------------------
-- ----------------
----- ------ - -------------
---- ---- -
--- ---
----- -------
------ -------
------ --------
-
---- ---- -
--- ---
------ -------
-------- -------
------- -----
-
----- --------- -
----- -------
------ -------
-
----- --------- -
------ -------
-------- -------
--------- ---
-
---- ----- -
-------- ----- -----
--------- --------
-------- ----- -----
--------- --------
-
---- -------- -
----------------- ------------ -----
----------------- ------------ -----
-
---
-- --- --- ----- ------ --
--------------------- - ------- --------- ---- ---以上代码定义了四个字段，两个输入类型和两个 Query 和 Mutation，我们先不考虑这些代码的语法细节和具体功能。现在你可以通过命令行启动这个项目，然后在浏览器中打开 http://localhost:3000/graphql，应该可以看到一个 GraphiQL 界面，这表示 GraphQL Server 和 Fastify 正常运行。如果你在 GraphiQL 页面中输入了一些查询或者修改数据的代码，你会发现这些操作在返回值面板中有响应。
步骤三：编写 GraphQL Resolver
既然 GraphQL Schema 已经定义好了，接下来就需要编写 Resolvers，它们是实现 Schema 定义的函数，决定了如何返回数据。按照上面定义的 Schema 类型，我们需要实现 6 个 resolver 函数，分别对应 2 个查询和 2 个修改操作。
--- ----- - --- -- -------
--- ----- - --- -- -------
-- ------ -- -- ------ ----- - -------- ------- -------- --
----- --------- - -
------ -
--------- -- -- ------ -- ---------
----- ------ - -- -- -- ------------ -- ---- --- --------------
--------- -- -- -------------- -- -- ---- - ------ -- ------------ -- ----
----- ------ - -- -- -- ------------ -- ---- --- -------------
--
--------- -
----------- ------ - ------ - ----- ----- - -- -- -
----- ---- - - --- ------------ - -- ----- ------ ------ -- --
----------------- -- -------------
------ ----- -- ---------
--
----------- ------ - ------ - ------ -------- -------- - -- -- -
----- ---- - - --- ------------ - -- ------ -------- -------- --
----------------- -- -------------
----- ---- - ------------ -- ---- --- --------------------
-- ------ -
---------------------- -- ---------
-
------ ----- -- ---------
-
--
----- -
------ ---- -- -------------- -- ---------- --- -------- -- ----- -- -------
--
----- -
------- ---- -- ------------ -- ---- --- -------------- -- ------- -- ----
-
--
--------------------- - ------- ---------- --------- ---- ---注意到返回数据的函数都是在 resolvers 中定义的。对于上述代码中的 6 个 Resolver 函数而言，它们的功能分别对应如下：
- allUsers: 返回所有用户记录
- user: 返回单个用户记录
- allPosts: 返回所有文章记录，按照倒序排列
- post: 返回单个文章记录
- createUser: 创建新的用户记录，返回创建后的用户记录
- createPost: 创建新的文章记录，返回创建后的文章记录
步骤四：测试 GraphQL API 和 Resolvers
现在我们的 GraphQL API 已经编写完成，并且已经在 Fastify 中实现。接下来，我们可以使用 Postman 或者其他的 API 测试工具来测试一下这个 GraphQL API。
比如，如果你向 /graphql 端点发出如下请求：
---- -------- - -------- -- -------- - ---- ----- - -- -
那么服务器会回传类似下面的响应：
-
------- -
----------- -
-
------- --------
-------- -------------------
--
-
------- ------
-------- -----------------
-
-
-
-以上表示获取所有用户记录的响应。按照相似的方式可以测试其他的 resolver 函数。
总结
通过本篇文章，我们简单介绍了如何使用 Fastify 进行 GraphQL API 开发。其中我们首先搭建了 Fastify 的开发环境，然后定义了 GraphQL Schema 和 Resolver，最终进行了测试。如果你的前端项目中需要使用 GraphQL API，Fastify 是一个不错的选择，它的性能表现非常出色，而同时它又是一款相对易于上手的 Web 框架。在实际项目中，运用 GraphQL API 开发工作则要考虑更多的因素，比如 API 认证、错误处理等等。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6470faf8968c7c53b0efce1e