在现代化的 Web 应用程序中，数据查询是至关重要的一部分。GraphQL 和 Prisma 这两种技术都可以帮助前端工程师更轻松地实现数据查询。在本篇文章中，我们将学习如何结合使用 GraphQL 和 Prisma 实现数据查询的功能，并提供示例代码。
什么是 GraphQL？
GraphQL 是一种用于 API 的查询语言，它使用强类型系统来帮助客户端应用程序准确地请求其需要的数据。它由 Facebook 开发并于 2015 年开源。
GraphQL 的优点在于它可以帮助前端工程师明确地定义数据所需的类型和属性，而不是像 REST API 那样需要进行多次请求和处理额外的数据。这种模式可以更好地满足客户端应用程序的需求，提高性能并降低网络带宽的需求。
什么是 Prisma？
Prisma 是一个现代化的 ORM （对象关系映射）框架，用于 Node.js，可以轻松地将数据库与 GraphQL API 集成。它支持多种数据库系统，包括 MySQL，PostgreSQL，SQLite 和 MongoDB。
Prisma 的优点在于它可以生成类型安全的数据访问层，提供自定义连接器和类型定义。它还支持数据查询，数据变异（数据修改），实时数据推送和事务处理。
借助 Prisma，前端工程师可以更轻松地进行数据查询，而不必担心 SQL 查询语句和数据库连接器的编写。
结合使用 GraphQL 和 Prisma
现在我们已经了解了 GraphQL 和 Prisma 的基本概念和优点，让我们看看如何结合使用这两者。以下是我们将要执行的步骤：
- 安装 Prisma 和 GraphQL 依赖项
- 定义数据模型
- 编写 GraphQL schema
- 使用 Prisma 生成 Prisma Client
- 实现 GraphQL resolver
安装 Prisma 和 GraphQL 依赖项
要使用 Prisma 和 GraphQL，我们需要先安装它们的依赖。在我们开始安装之前，请确保您已具有 Node.js 和 npm 的最新版本。另外，我们还将使用 TypeScript 作为编程语言。
打开终端并运行以下命令以创建一个新的项目并安装所需的依赖项。
$ mkdir graphql-prisma-example $ cd graphql-prisma-example $ npm init -y $ npm install graphql @prisma/client prisma nodemon $ npm install typescript ts-node-dev @types/graphql @types/node --save-dev
定义数据模型
接下来，我们将定义一个简单的数据模型，该模型包含一个 Todo 类型。在您的项目根目录中创建 prisma/schema.prisma 文件，并添加以下内容：
-- -------------------- ---- ------- ---------- -- - -------- - -------- --- - --------------- - ----- ---- - -- --- --- ------------------------- ----- ------ --------- ------- --------------- -展开代码
上述数据模型包含 Todo 类型，其中包括一个 id 属性，一个 title 属性和一个 completed 属性。id 属性使用 @id 标志符表示，它表示此属性是此模型的唯一标识符。@default 标志符指定默认值，当创建新的 Todo 时，completed 属性的值将自动设置为 false。
编写 GraphQL schema
接下来，我们需要编写 GraphQL schema。GraphQL schema 定义了我们可以对数据执行的所有操作。创建 src/schema.ts 文件，并添加以下内容：
-- -------------------- ---- ------- ------ - -------------------- - ---- --------------- ------ - --------------- ------------- - ---- --------------------- ----- -------- - - ---- ---- - --- --- ------ ------- ---------- -------- - ---- ----- - ------ -------- ------------ ----- ---- - ----- --------- - ------ ------- ---------- ------- - ---- -------- - ----------------- ------------ ----- -------------- ---- ------ ------------ ---- -------------- ----- -- - - ----- --------- -------------------------- - ----- --- - -- -- -------- -- - ----- ------ - -------------- ----- ---- - ----- --------------------- ------ - --- ---------- - -- ------ ---- - ----- ------ ----------------------- - ----- --- --- -------- -- - ----- ------ - -------------- ----- ----- - ----- ---------------------- ------ ----- - ----- ----------- --------------------------- - ----- --- - ----- -- -------- -- - ----- ------ - -------------- ----- ---- - ----- -------------------- ----- ----- -- ------ ---- - ----- ----------- --------------------------- - ----- --- - -- -- -------- -- - ----- ------ - -------------- ----- -------------------- ------ - --- ---------- - -- ------ -- - ----- ----------- --------------------------- - ----- --- - --- ----- -- -------- -- - ----- ------ - -------------- ----- ---- - ----- -------------------- ------ - --- ---------- -- ----- ----- -- ------ ---- - ----- --------- - - ------ - ------ -------- -- --------- - ----------- ----------- ---------- - - ----- ------ - ---------------------- --------- --------- -- ------ ------- ------展开代码
上述代码定义了我们的 Todo 类型、查询、输入类型和变异操作。查询包括 todos 和 todoById。变异操作包括 createTodo、updateTodo 和 deleteTodo。
使用 Prisma 生成 Prisma Client
使用 Prisma 的主要优点之一是它可以自动生成类型安全的数据访问层代码。现在我们将使用 Prisma 生成该代码。执行以下命令以添加 Prisma 生成器到项目：
$ npx prisma generate执行以上命令后，Prisma 将自动将我们定义的模型转换为对应数据库的数据模式，并生成 @prisma/client 包的 Prisma Client 类型安全访问器。
现在我们可以使用 Prisma Client 代码来执行实际的数据库操作。在我们的 resolver 中使用 context.prisma 调用 Prisma Client。例如，在我们的 todoById resolver 中：
-- -------------------- ---- ------- ----- --------- -------------------------- - ----- --- - -- -- -------- -- - ----- ------ - -------------- ----- ---- - ----- --------------------- ------ - --- ---------- - -- ------ ---- -展开代码
实现 GraphQL resolver
现在，我们已经定义了 GraphQL schema，并生成了 Prisma Client 类型安全访问器。接下来，我们将实现 resolvers，并将其绑定到 schema。为此，创建 src/index.ts 文件并添加以下内容：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------- ------ ------ ---- ---------- ------ - ------------ - ---- ---------------- ----- ------ - --- -------------- ----- ------ - --- -------------- ------- -------- - ------ - -- ----- ---- - ---------------- -- ---- --------------------------- --- -- -- - --------------- ------ ----- -- -------- --展开代码
在上述代码中，我们创建一个实例化的 PrismaClient，并将其附加到 Apollo Server 的上下文中，以便在后续的 resolvers 中使用。Apollo Server 还使用我们在前面定义的 schema。
示例应用程序
现在，我们已经了解了如何结合使用 GraphQL 和 Prisma 的基础知识，接下来我们将创建一个简单的应用程序。
在项目根目录下创建 src/index.ts 文件，并添加以下内容：
-- -------------------- ---- ------- ------ ------------------ ------ - ------------ - ---- --------------- ------ - ----------- - ---- -------------- ------ - ------------ - ---- ---------------- ------ - ------------ - ---- ----------------- ----- -------- ----------- - ----- ------ - --- -------------- ----- ------ - ----- ------------- ---------- --------------- --------- ----- -- ----- ------ - --- -------------- ------- -------- - ------ - -- ----- ---- - ---------------- -- ---- ----- ------------------- --------------- ------ ----- -- -------------------------- - -----------展开代码
上述代码创建了一个 Apollo Server，并将 Prisma 客户端附加到 Apollo Server 的上下文中，在 TodoResolver 中使用该客户端。
在项目根目录中创建 src/todo-resolver.ts 文件，并添加以下内容：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ------ - --------- ------ --------- --- - ---- -------------- ------ - ---- - ---- -------- --------------- ------ ----- ------------ - ------- ------ - --- -------------- --------- -- ------- ----- ------- - ------ ----- --------------------------- - --------- -- ----- ----- ------------------- --- ------- - ------ ----- -------------------------- ------ - -- - -- - ------------ -- ----- ----- ----------- ------------- ------ ------- ----------------- - --------- ---- -- ----------- ------- - - ------ ----- ------------------------- ----- - ------ ---------- --------- -- ----- - -- - ------------ -- ----- ----- ----------- ---------- --- ------- ------------- - --------- ---- -- ------- ------- ----------------- - --------- ---- -- ----------- ------- - - ------ ----- ------------------------- ------ - -- -- ----- ----- --- --------- - - ----- - - --------- --- --------- - - --------- - - -- -- - ------------ -- -------- ----- --------------------- --- ------- - --- - ----- ------------------------- ------ - -- - -- ------ ---- - ----- - ------ ----- - - -展开代码
上述代码为 schema 定义添加了一个针对 Todo 的 resolver，并包括以下操作：
todos: 获取所有 TodotodoById: 获取特定 TodocreateTodo: 创建新 TodoupdateTodo: 更新 Todo 属性deleteTodo: 删除 Todo
最后，我们需要创建一个 Todo 类，该类定义了 GraphQL schema 中 Todo 类型的结构。在 src/todo.ts 文件中添加以下内容：
-- -------------------- ---- ------- ------ - ----------- ------ --- - ---- -------------- ------------- ------ ----- ---- - --------- -- ---- --- ------ -------- ------ ------ -------- ---------- ------- -展开代码
现在我们可以运行应用程序。请注意，我们之前已经安装了 nodemon，我们将使用该工具来自动重新启动应用程序。运行以下命令开始应用程序：
$ npx nodemon src/index.ts
现在您可以使用任何 GraphQL 客户端库（如 Apollo Client）对我们的 API 进行数据查询和变异。要测试 API，可以在浏览器中打开 GraphQL Playground，网址为 http://localhost:4000/graphql，按照 API 定义进行请求操作。
总结
GraphQL 和 Prisma 是两个强大的工具，可以帮助前端工程师更轻松地实现数据查询。结合使用 GraphQL 和 Prisma 可以更高效地查询数据，增强应用程序的性能，并提高应用程序的灵活性。在此篇文章中，我们涵盖了这两个技术的基础知识，并提供了一个示例应用程序以供参考。现在，您可以使用这些工具在自己的 Web 应用程序中实施数据查询了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64642c44968c7c53b050f3f4
