前言
前端开发者总是面临着一些挑战，例如前端与后端的通信，数据库的管理等等。而 Prisma 和 GraphQL 正好可以解决这些问题。在本文中，我们将展示如何使用 Prisma 和 GraphQL 构建一个全栈应用，并深入探讨一些关键概念。
Prisma 简介
Prisma 是一个现代化的 ORM（Object-relational mapping，对象关系映射）框架，它可以轻松管理数据库。它支持主要的数据库，包括 MySQL、PostgreSQL、SQLite、SQL Server。 Prisma 可以快速生成数据模型，并提供类型安全的查询语言。
GraphQL 简介
GraphQL 可以使我们更容易地管理和查询 API 数据。与传统的 RESTful API 不同，GraphQL 允许您在单个请求中指定更多数据，并返回与您请求的数据结构相匹配的结果。它是一种开放的规范和查询语言。
Prisma 和 GraphQL 搭配使用
Prisma 和 GraphQL 的组合可以提供一个完整的数据处理解决方案。Prisma 可以处理核心数据逻辑，并管理您的数据库， GraphQL 作为 API 层，在 Prisma 的基础上构建 API，控制数据访问以及数据结构的转换，并且提供极致的灵活度。
让我们来看一下如何在 Prisma 和 GraphQL 中创建应用。
创建 GraphQL 服务器
首先，我们需要创建一个 GraphQL 服务器。我们使用 express-graphql 和 graphql-yoga 来实现 GraphQL 服务器，但你也可以使用其它 GraphQL 服务器。使用以下命令安装依赖库：
npm install express-graphql graphql-yoga --save
然后在项目的根目录创建 server.js 文件，该文件创建 GraphQL 服务器，如下所示：
-- -------------------- ---- -------
----- - ------------- - - -----------------------
----- - ------------ - - -------------------------
----- ------ - --- --------------
----- --------- - -
------ -
------ --- - ---- -- -- ------ ------ -- -----------
--
-
----- ------ - --- ---------------
--------- -----------------------
----------
-------- --------- -- --
-----------
-------
---
--
--------------- -- ------------------- -- ------- -- ------------------------在根目录下创建 src/schema.graphql，它描述了我们的数据结构，如以下示例所示：
type Query {
hello(name: String): String!
}在这个示例中，我们定义了一个 hello 查询，它需要一个名为 name 的字符串作为参数，并返回一个字符串。
现在，我们进入到 GraphQL Playground，页面为：http://localhost:4000，我们打开网址，就可以写一个查询：
query {
hello(name: "Prisma")
}如果一切正常，我们将得到以下结果：
{
"data": {
"hello": "Hello Prisma!"
}
}使用 Prisma 创建数据模型
在我们继续之前，我们需要创建一个 SQLite 数据库并为之初始化数据模型。在这个例子中，我们使用 SQLite 作为我们的后端数据库。您可以使用任何支持的数据库。
使用以下命令安装 Prisma：
npm install @prisma/cli --save-dev
然后使用以下命令初始化 Prisma 数据模型：
npx prisma init
在完成后，我们可以看到 prisma 目录以及 prisma/schema.prisma 文件。这个文件是 Prisma 数据模型的核心。
让我们来看一下该文件的内容：
-- -------------------- ---- ------- ---------- -- - -------- - -------- --- - --------------- - --------- ------ - -------- - ------------------ - ----- ---- - -- --- --- ------------------------- ---- ------- ----- ------ ------- ----- ------ - ----- ---- - -- --- --- ------------------------- ----- ------ ------- ------- --------- ------- --------------- -------- --- ------ ---- ----------------- ----------- ----------- ----- -
这里我们定义了两个数据模型：User 和 Post，User 模型具有一个 id 字段、name 字段和一个 email 字段。Post 模型具有一个 id 字段、title 字段、content 字段、published 字段、authorId 字段和一个 author 对象，该对象是从 User 模型中映射而来。您可以自己添加更多的字段。
在定义数据模型后，我们需要对它进行迁移。使用以下命令运行迁移：
npx prisma migrate dev --create-only
该命令将为您创建一个新的迁移。为了执行这个迁移，使用以下命令：
npx prisma migrate dev
这将应用所有未应用的迁移。
解析 GraphQL 查询
现在，我们已经创建了数据模型并定义了查询结构，我们的 GraphQL 服务器能够接收查询，但我们不知道如何解析它们或如何获取 Prisma 数据库中的实际数据。
让我们来看一下如何解析查询。我们将使用 graphql-request 库。使用以下命令安装它：
npm install graphql-request --save
我们将使用以下查询语句获取所有的用户：
query {
users {
id
email
name
}
}使用以下代码解析查询：
-- -------------------- ---- -------
----- - ------- - - --------------------------
----- ----- - -
----- -
----- -
--
-----
----
-
--
-------------------------------- ------------------ -- ------------------这个示例演示了如何使用 request() 函数来发出请求并接收响应。
向 Prisma 创建新的数据
我们将使用以下代码向 Prisma 创建新的用户：
-- -------------------- ---- -------
----- ------------- - ----- -- -- -
----- ------ - ----- --------------------
----- -
----- ----- ------
------ ---------------------
--
--
----------------------- -------
-
---------------createNewUser() 函数将创建 name 为 “Test User”，email 为 “test.user@test.com” 的新用户。
修改 Prisma 中的数据
我们假设我们已经创建了一个用户。现在让我们来看一下如何修改已有的数据，如更改用户名。
我们将使用以下代码来修改用户：
const updateUser = async () => {
const result = await prisma.user.update({
where: { email: 'test.user@test.com' },
data: { name: 'New User' },
})
console.log('updated:', result)
}
updateUser()使用这个函数，我们可以将用户的名称更改为 “New User”。
删除 Prisma 中的数据
我们将使用以下代码来删除用户：
const deleteUser = async () => {
const result = await prisma.user.delete({
where: { email: 'test.user@test.com' },
})
console.log('deleted:', result)
}
deleteUser()使用这个函数我们可以将用户从 Prisma 中删除。
添加 Resolver 函数
我们还可以添加 Resolver 函数以处理请求。在解析器函数中，我们可以调用 Prisma API 来查询、创建、更新或删除数据。
例如，在创建 Resolver 函数时，我们可以使用以下代码：
-- -------------------- ---- -------
----- --------- - -
------ -
----- --- - ----- -- -------- -- -----------------------------
------ - ----- --
---
--
--------- -
----------- --- - ----- ----- -- -------- -- ----------------------------
----- - ----- ----- --
---
----------- --- - ------ ---- -- -------- -- ----------------------------
------ - ----- --
----- - ---- --
---
----------- --- - ----- -- -------- -- ----------------------------
------ - ----- --
---
--
-在这个例子中，我们定义了 Query 和 Mutation 操作。在 Query 操作中，我们定义了一个 user() 函数，它将检索具有给定 email 的用户。在 Mutation 操作中，我们定义了 createUser()、updateUser() 和 deleteUser() 函数。
添加 GraphQL Subscription
最后，我们还可以使用 GraphQL Subscription 实现实时数据更新。我们将使用 graphql-subscriptions 库。
使用以下命令安装它：
npm install graphql-subscriptions --save
我们将使用以下代码使 Prisma 实时更新所有用户的名称：
-- -------------------- ---- -------
----- - ------ - - --------------------------------
----- ------ - --- --------
----- --------- - -
------ -
------ --- --- -------- -- -------------------------------
----- --- - ----- -- -------- -- -----------------------------
------ - ----- --
---
--
--------- -
----------- --- - ----- ----- -- -------- -- ----------------------------
----- - ----- ----- --
---
----------- --- - ------ ---- -- -------- -- ----------------------------
------ - ----- --
----- - ---- --
---
----------- --- - ----- -- -------- -- ----------------------------
------ - ----- --
---
--
------------- -
---------- -
---------- -- -- ----------------------------------
--
--
-
----- ------ - --- ---------------
--------- -----------------------
----------
-------- --------- -- --
-----------
-------
-------
---
--
--------------- -- ------------------- -- ------- -- ------------------------在这个代码中，定义了一个名为 userAdded 的 Subscription，也可以定义更多的 Subscription。
总结
在这篇文章中，我们展示了如何使用 Prisma 和 GraphQL 创建一个全栈应用程序。我们解释了 Prisma 和 GraphQL 的基本概念以及如何使用它们。
我们向您展示了如何创建 GraphQL 服务器，并集成 Prisma 数据模型。我们还向您展示了如何查询和操作数据，以及如何将其解析为 GraphQL 查询。我们还向您展示了如何实现 Subscription 实时更新数据。
我们希望这篇文章对您来说是有用的，能够帮助您更好地了解如何使用 Prisma 和 GraphQL 来构建全栈应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1ccfb48841e9894e0012b