引言
GraphQL 和 Prisma 是两个非常流行的现代 Web 开发技术。GraphQL 是一种用于 API 的查询语言和运行时环境，能让客户端发送一个描述性的查询请求，获得准确的数据。而 Prisma 是一个开源数据库工具，提供了简单易用的 ORM（对象关系映射） API，帮助开发者管理数据库并操作数据。
本文将会介绍如何使用 GraphQL 和 Prisma 构建现代 Web 应用。我们将首先深入了解 GraphQL 和 Prisma 的特性，然后使用示例代码来展示如何将二者相结合建立一个 Web 应用。
GraphQL
GraphQL 是一种用于 API 的查询语言和运行时环境，它能够减少前端和后端之间的通信，让前端能够准确地请求所需要的数据。它的工作原理是，客户端发送一个描述性的 GraphQL 查询请求给服务器，服务器返回一个 JSON 字符串作为响应，其中只包含客户端需要的数据。
相较于传统的 RESTful API，GraphQL 具有以下优点：
- 精确的数据请求：客户端可以按需请求它所需要的具体数据，而非一整个 JSON 文档
- 更少的网络通信：GraphQL 只会返回客户端需要的数据，减少了网络传输的负担
- 模式强制：GraphQL 强制前后端之间的数据协议，防止出现数据不一致等问题
GraphQL 的语法非常简单易懂，以下是一个 GraphQL 查询示例：
-- -------------------- ---- -------
----- -
----------- ---- -
----
-----
----- -
-----
-------
-
-
-在这个查询中，客户端请求了一个 id 为 1 的用户的 name 和 email 属性，以及该用户的所有帖子的 title 和 content 属性。
Prisma
Prisma 是一个现代化的 ORM（对象关系映射）框架，支持 TypeScript 和 JavaScript。它提供了一种简单的方法来与数据库进行交互，比传统的 ORM 更易于使用。
Prisma 的主要特点包括：
- 简单的数据模型：Prisma 数据模型使用的是 GraphQL SDL（Schema Definition Language）语法，易于理解和编写
- 兼容多种数据库：Prisma 可以与各种常见数据库进行交互，如 PostgreSQL、MySQL 和 MongoDB 等
- 可扩展性：Prisma 的模块化框架使得它可以轻松进行扩展和定制
以下是一个使用 Prisma 配置数据库连接的示例：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
----- ------ - --- --------------
----- -------- ------ -
----- ---- - ----- --------------------
----- -
------ -----------------------
----- ----- -----
------ -
------- -
------ ------- --------
-------- ----- -- -- ----- ------
--
--
--
--
-----------------
-
------
-------- -- -----------------
-------------- -- -- ----- ---------------------在这个示例中，我们定义了一个名为 user 的对象，它包含了一个 email、一个 name 属性和一个 posts 嵌套属性。posts 属性又包含了一个 title 和一个 content 属性。我们使用上述对象创建一个新的用户，并在该用户下创建一篇名为 "Hello, World!" 的文章。
GraphQL 和 Prisma 的结合
现在我们已经了解了 GraphQL 和 Prisma 单独的特点，接下来我们来看看如何将两者结合起来创建一个现代化的 Web 应用。
第一步：创建 Prisma 数据模型
我们首先需要创建一个包含数据模型的 Prisma 项目。在该项目中，我们定义了如下 Model 数据模型：
-- -------------------- ---- ------- ----- ---- - -- --- --- ------------------------- ----- ------ ------- ---- ------- ----- ------ - ----- ---- - -- --- --- ------------------------- --------- -------- --------------- --------- -------- ---------- ----- ------ ------- ------ --------- ------- --------------- ------ ---- ----------------- ----------- ----------- ----- -------- --- -
该模型定义了两个实体，User 和 Post。一个 User 对象包含了 id、email、name 和一个 Post 数组。一个 Post 对象包含了 id、createdAt、updatedAt、title、content、published 和 author 等属性。
注意：实体之间存在一对多的关系。每个 Post 知道它属于哪个 User，因为它包含了一个名为 authorId 的属性。
第二步：编写 GraphQL 业务逻辑
我们需要编写一个 GraphQL API 来管理上述数据模型。以下是 API 的实现：
-- -------------------- ---- ------- ---- ---- - --- ---- ------ ------- ----- ------ ------ -------- - ---- ---- - --- ---- ---------- --------- ---------- --------- ------ ------- -------- ------- ---------- -------- ------- ----- - ----- --------- - ------ ------- -------- ------- ---------- -------- - ---- ----- - ----------- ------ ---- ----------- ------ ---- ------------------ -------- -------------------- -------- - ---- -------- - ----------------- -------- ----- -------- ----- -------------------- ----- ----- ------------ ----- -------------- ----- ----- ----------- ---- -------------- ------ ---- -
在这个 Schema 中，我们定义了两个 Object Type，User 和 Post，它们分别代表了 Prisma 中的两个实体。我们还定义了一个 Mutation 类型和一个 Query 类型，Mutation 类型含有多个函数用于创建、更新和删除资源。Query 类型则用于查询资源。
第三步：编写 Resolver
Resolver 是实现 GraphQL API 业务逻辑的函数。以下是 Resolver 的具体实现：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
--------- ------- -
------- ------------
-
----- --------- - -
------ -
-------- ----- --- - -- -- - ------ -- -------- --
----- ------------------------ ------ - -- - ---
-------- ----- --- - -- -- - ------ -- -------- --
----- ------------------------ ------ - -- - ---
------------------ ----- --- --- - ------ -- -------- --
----- ---------------------- ------ - ---------- ---- - ---
-------------------- ----- --- --- - ------ -- -------- --
----- ---------------------- ------ - ---------- ----- - ---
--
--------- -
----------- ----- --- - ------ ---- -- - ------ -- -------- --
----- -------------------- ----- - ------ ---- - ---
----------- ----- --- - --------- ---- -- - ------ -- -------- --
----- --------------------
----- -
--------
------- - -------- - --- -------- - --
--
---
----------- ----- --- - --- ---- -- - ------ -- -------- --
----- --------------------
------ - -- --
----- - ------- --
---
----------- ----- --- - -- -- - ------ -- -------- --
----- -------------------- ------ - -- - ---
--
----- -
------ ----- -- -- -- -- - ------ -- -------- --
----- ---------------------- ------ - --------- -- - ---
--
----- -
------- ----- -- -------- -- -- - ------ -- -------- --
----- ------------------------ ------ - --- -------- - ---
--
-
------ ------- ---------这段代码定义了每个字段的实现，如 getUser 对应了 prisma.user.findUnique 方法。注意，GraphQL 使用到了 Context，我们可以在 Context 里面传入 PrismaClient 的实例。在 resolvers 里我们可以解构出 Context 的 prisma 对象使用它来处理数据，这里的例子中我们使用 prisma.user 创建用户、prisma.post 创建文章、prisma.post.findMany 查询文章等。
第四步：集成 GraphQL Server & Prisma Client
我们需要将以上所有的实现组合起来，并在 GraphQL Server 启动时进行初始化。因此，我们需要一个文件来设置 GraphQL Server 和 PrismaClient。
以下是该文件的实现：
-- -------------------- ---- -------
------ - ------------ - ---- -----------------------
------ ------- ---- ---------
------ --------- ---- -------------
------ - ------------ - ---- ----------------
----- ------ - --- --------------
----- --- - ---------
----- ------ - --- --------------
--------- ----------------------------
----------
-------- -- --- -- -- -
------ -
-------
-------
-
--
--
-----------------------
------------------------ --- --
---------------- -- -- -
------------------- ------- -- ------------------------
--通过以上代码，我们可以编写一个简单的 Express.js Web 应用，该应用会使用步骤一中创建的 Prisma 数据模型和步骤二中定义的 GraphQL 的 API 接口。最后使用上述四部曲成功集成 Prisma 和 GraphQL 的 Server 代码示例完成。
总结
本文介绍了如何使用 GraphQL 和 Prisma 构建现代化的 Web 应用。我们首先了解了 GraphQL 和 Prisma 分别的特点，然后结合实例，深入理解了如何使用两者构建现代 Web 应用。这些有益的技术知识可以帮助开发者更快速地创建 Web 应用程序，减少了开发成本和时间，同时提高了 API 的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba1a73add4f0e0ff2a6543