在前端开发中，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 模拟器。
安装依赖
我们首先需要安装一些必备的依赖，在终端输入以下命令：
npm init -y npm install graphql graphql-yoga prisma --save
创建目录结构
我们需要一个项目目录，以及一些相关的文件和文件夹，来开始构建 GraphQL API 模拟器。在项目根目录下创建一个 src 文件夹，它下面的目录结构如下所示：
src/ ├── index.js (the server startup file) ├── schema.graphql (the API schema) ├── resolvers/ (the resolver functions for handling API requests) ├── db/ (the database schema) ├── queries/ (the GraphQL queries)
编写 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 const users = [
{ id: "1", name: "Lucy", email: "lucy@example.com" },
{ id: "2", name: "Tom", email: "tom@example.com" },
{ id: "3", name: "Bob", email: "bob@example.com" },
{ id: "4", name: "Jane", email: "jane@example.com" },
];这里我们用 export 关键字来导出了 users 数组。
连接数据库
现在我们需要连接一个模拟的数据库，让我们的模拟器更加真实。我们可以使用 prisma 来实现这个操作。
我们需要在项目根目录下创建 prisma/schema.prisma 文件，内容如下：
-- -------------------- ---- ------- ---------- -- - -------- - -------- --- - --------------- - ----- ---- - -- ------ --- ---------------- ---- ------ ----- ------ -
这里我们定义了一个 SQLite 的数据源，并且定义了一个 User 数据模型。我们还指定了一个 id 字段，并在该字段上添加了一个 @id，用于标记它为唯一标识符。
接下来，我们需要使用命令来自动为我们的服务生成 Prisma 客户端代码以及 Migrations，输入以下命令：
npx prisma generate npx prisma migrate dev --name init
这里我们使用 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
这里我们运行 npx prisma generate，以重新生成我们的 Prisma 客户端代码。
启动 GraphQL 服务器
现在我们可以启动 GraphQL 服务器，以使我们的模拟器能够正常工作。我们需要在 index.js 中写入以下代码（和正确的路径）：
-- -------------------- ---- ------- ----- - ------------- - - ------------------------ ----- --------- - ----------------------------- ----- ------ - --- --------------- --------- ----------------------- ---------- -------- --- -- ---- -- ---- ----- ---- - -------- ------- ------ --- --- --- --------------- -- -------------------- ------ -- ------- -- -------------------------
在上面的代码中，我们首先导入了 GraphQLServer 和我们之前定义好的 resolvers。接着，我们创建了一个 GraphQLServer 对象，并指定了 typeDefs 和 resolvers，同时还定义了一个上下文对象。
我们还通过调用 start 方法，将我们的 GraphQL 服务器启动起来，并在控制台输出启动信息。
运行 GraphQL 服务器
现在，我们的 GraphQL 服务器已经运行了起来。我们可以在终端中运行以下命令：
npm run start
现在我们可以访问 http://localhost:4000，访问我们的 GraphQL 工具，输入以下内容：
query {
users {
id
name
email
}
}这里我们查询所有用户的 ID，姓名和电子邮件地址。最终，我们应该得到一个类似于以下输出：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- ----
------- -------
-------- ------------------
--
-
----- ----
------- ------
-------- -----------------
--
-
----- ----
------- ------
-------- -----------------
--
-
----- ----
------- -------
-------- ------------------
-
-
-
-恭喜你，你已经成功地创建了一个本地的 GraphQL API 模拟器！
结论
在本文中，我们学习了如何使用 Node.js 和一些相关的技术，来构建一个本地的 GraphQL API 模拟器。我们主要介绍了如何使用 GraphQL-yoga 和 Prisma 这两个工具来构建和管理本地的 GraphQL API，丰富和模拟查询数据集，以及进行测试和调试。通过这些技术，我们可以更加高效和便捷地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f29c09a44b36ee57669470