在前端开发中，GraphQL 是一个越来越热门的数据查询语言。它强调的是数据的类型化和强类型检查，并提供了一种简洁明了的方式来描述数据之间的关系。在实际的应用中，我们通常需要与一个真实的 GraphQL API 进行交互，但是在开发的早期或者需要做一些测试的时候，我们可能需要一个本地的 GraphQL API 模拟器来进行开发和测试。
本文将介绍如何使用 Node.js 和一些相关的技术，来构建一个本地的 GraphQL API 模拟器。我们将详细介绍如何使用 GraphQL-yoga 和 Prisma 这两个工具来构建和管理本地的 GraphQL API，丰富和模拟查询数据集，以及进行测试和调试。
技术要点
在开始构建本地的 GraphQL API 模拟器之前，我们需要先了解一些涉及到的技术要点。
GraphQL
GraphQL 是一种用于构建 API 的查询语言，它通过一个字符串的形式来描述特定数据。它被设计为一个非常强大和灵活的 API 查询工具，可以根据客户端的需要，返回任何数据的子集或者目录。GraphQL 强调的是能够设计出具备强类型检查和自我描述的 API，能够支持多平台和多端设备的查询需求。
GraphQL-yoga
GraphQL-yoga 是一个用于构建 GraphQL 服务器的库，它是一个高度可配置的 GraphQL 服务器，可以轻松地在本地或者云端环境下使用。它可以快速地启动和配置 GraphQL API 的服务器，提供了许多预配置的中间件和插件，方便我们进行开发和测试。
Prisma
Prisma 是一个现代化的 ORM（Object-relational mapping）框架，它提供了一组面向类型的 API，能够让我们以更加易于管理的方式来处理数据库。Prisma 还提供了强大的数据建模功能，可以通过类似于 GraphQL 的方式来建模数据，生成对数据进行增删改查的代码。
Mock 数据
最后，我们需要产生 Mock 数据来填充我们的数据集。这可以通过硬编码的方式完成，并使用 JSON 格式存储，也可以使用第三方 Mock Api 工具进行辅助完成。
操作步骤
接下来，我们将一步一步地创建我们的 GraphQL API 模拟器。
安装依赖
我们首先需要安装一些必备的依赖，在终端输入以下命令：
--- ---- -- --- ------- ------- ------------ ------ ------
创建目录结构
我们需要一个项目目录，以及一些相关的文件和文件夹，来开始构建 GraphQL API 模拟器。在项目根目录下创建一个 src 文件夹，它下面的目录结构如下所示：
---- --- -------- ---- ------ ------- ----- --- -------------- ---- --- ------- --- ---------- ---- -------- --------- --- -------- --- --------- --- --- ---- -------- ------- --- -------- ---- ------- --------
编写 schema
我们需要先定义一份 GraphQL schema，这将作为我们模拟器的基本结构。
在 schema.graphql 文件中，我们定义了 User 类型，包括 id，name 和 email 属性，作为我们的模拟数据集，如下所示：
---- ---- - --- --- ----- ------- ------ ------- - ---- ----- - ------ -------- -
这里我们定义了 User 类型，并且定义了一个 users 查询函数，用于返回所有用户的列表。
编写 resolver
接下来，我们需要编写一些 resolver 函数，用于处理从前端发来的请求，并返回我们的 Mock 数据。
我们要在 resolvers 目录下创建一个 users.js 的文件，并且在其中填写如下的代码：
----- ----- - -
- -- - ---- ----- ------- ------ ------------------ --
- -- - ---- ----- ------ ------ ----------------- --
- -- - ---- ----- ------ ------ ----------------- --
- -- - ---- ----- ------- ------ ------------------ --
--
----- --------- - -
------ -
------ -- -- -
------ ------
--
--
--
-------------- - ----------这里我们首先定义了一个 users 数组，里面存储了四个固定的用户数据。接着我们定义了一个 resolvers 对象，其中 Query 对象包含了 users 关键字，它的值是一个返回数据数组的函数。
编写 mock 数据
接下来，我们需要在 db 目录下创建一个 data.ts 的文件来存储 Mock 数据，代码如下：
------ ----- ----- - - - --- ---- ----- ------- ------ ------------------ -- - --- ---- ----- ------ ------ ----------------- -- - --- ---- ----- ------ ------ ----------------- -- - --- ---- ----- ------- ------ ------------------ -- --
这里我们用 export 关键字来导出了 users 数组。
连接数据库
现在我们需要连接一个模拟的数据库，让我们的模拟器更加真实。我们可以使用 prisma 来实现这个操作。
我们需要在项目根目录下创建 prisma/schema.prisma 文件，内容如下：
---------- -- - -------- - -------- --- - --------------- - ----- ---- - -- ------ --- ---------------- ---- ------ ----- ------ -
这里我们定义了一个 SQLite 的数据源，并且定义了一个 User 数据模型。我们还指定了一个 id 字段，并在该字段上添加了一个 @id，用于标记它为唯一标识符。
接下来，我们需要使用命令来自动为我们的服务生成 Prisma 客户端代码以及 Migrations，输入以下命令：
--- ------ -------- --- ------ ------- --- ------ ----
这里我们使用 npx prisma generate 命令来为我们的项目生成 Prisma 客户端代码，使用 npx prisma migrate dev --name init 命令来启用 Prisma 迁移，并指定一个名称为 init，它将在我们的数据库中创建一个新的表。
编写 resolver
我们已经定义了我们的 schema 和存储 Mock 数据的数据库，现在我们需要编写一个 resolver 函数来返回我们的数据集。
我们要在 resolvers 目录下创建一个 users.js 的文件，并且在其中填写如下的代码：
----- - ------------ - - --------------------------
----- ------ - --- ---------------
----- --------- - -
------ -
------ -- -- -----------------------
--
--
-------------- - ----------首先，我们导入了 Prisma 客户端，并创建了一个实例 prisma。接着，我们定义了 users 的查询函数，该函数将从数据库中获取所有的用户数据。最后我们将 resolvers 对象导出。
生成 Prisma 客户端
最后，我们使用以下命令来生成 Prisma 客户端：
--- ------ --------
这里我们运行 npx prisma generate，以重新生成我们的 Prisma 客户端代码。
启动 GraphQL 服务器
现在我们可以启动 GraphQL 服务器，以使我们的模拟器能够正常工作。我们需要在 index.js 中写入以下代码（和正确的路径）：
----- - ------------- - - ------------------------ ----- --------- - ----------------------------- ----- ------ - --- --------------- --------- ----------------------- ---------- -------- --- -- ---- -- ---- ----- ---- - -------- ------- ------ --- --- --- --------------- -- -------------------- ------ -- ------- -- -------------------------
在上面的代码中，我们首先导入了 GraphQLServer 和我们之前定义好的 resolvers。接着，我们创建了一个 GraphQLServer 对象，并指定了 typeDefs 和 resolvers，同时还定义了一个上下文对象。
我们还通过调用 start 方法，将我们的 GraphQL 服务器启动起来，并在控制台输出启动信息。
运行 GraphQL 服务器
现在，我们的 GraphQL 服务器已经运行了起来。我们可以在终端中运行以下命令：
--- --- -----
现在我们可以访问 http://localhost:4000，访问我们的 GraphQL 工具，输入以下内容：
----- -
----- -
--
----
-----
-
-这里我们查询所有用户的 ID，姓名和电子邮件地址。最终，我们应该得到一个类似于以下输出：
-
------- -
-------- -
-
----- ----
------- -------
-------- ------------------
--
-
----- ----
------- ------
-------- -----------------
--
-
----- ----
------- ------
-------- -----------------
--
-
----- ----
------- -------
-------- ------------------
-
-
-
-恭喜你，你已经成功地创建了一个本地的 GraphQL API 模拟器！
结论
在本文中，我们学习了如何使用 Node.js 和一些相关的技术，来构建一个本地的 GraphQL API 模拟器。我们主要介绍了如何使用 GraphQL-yoga 和 Prisma 这两个工具来构建和管理本地的 GraphQL API，丰富和模拟查询数据集，以及进行测试和调试。通过这些技术，我们可以更加高效和便捷地进行前端开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f29c09a44b36ee57669470