使用 Prisma 和 GraphQL Yoga 构建 Next.js 应用程序
随着前端技术的不断发展，前端工程师的工作范围也越来越广泛。而在这个领域中，使用 Prisma 和 GraphQL Yoga 构建 Next.js 应用程序已经成为一种趋势。
Prisma 是一个现代化的数据库工具，它提供了一种简单而强大的方式来管理数据库。它支持多种语言和数据库，并提供了许多高级功能，例如数据模型定义、数据迁移和类型安全的查询构建器。
GraphQL Yoga 是一个基于 Express 的 GraphQL 服务器框架，它提供了强大的开发工具和简单的API来构建 GraphQL API。它支持许多常见的功能，例如身份验证、订阅和缓存。
Next.js 是一个基于 React 的轻量级应用程序框架，它提供了一种简单的方式来构建静态和动态网站。它支持服务器端渲染和自动代码拆分，以提高性能和可维护性。
在本文中，我们将介绍如何使用 Prisma 和 GraphQL Yoga 构建 Next.js 应用程序。我们将从安装和配置开始，然后讨论如何定义数据模型、编写 GraphQL 查询和操作数据库。最后，我们将构建一个完整的示例应用程序，以演示如何将这些技术组合在一起。
安装和配置
在开始之前，您需要安装 Node.js 和 npm。您还需要一个支持的数据库（例如 MySQL、PostgreSQL 或 SQLite）和一个 Prisma 帐户。
首先，我们将创建一个新的 Next.js 应用程序：
npx create-next-app my-app cd my-app
然后，我们将安装 Prisma 和 GraphQL Yoga：
npm install prisma graphql-yoga
接下来，我们需要在项目根目录中创建一个 .env 文件，并将以下内容添加到其中：
DATABASE_URL="postgresql://user:password@localhost:5432/mydatabase"
请将 user、password 和 mydatabase 替换为您的数据库凭据和数据库名称。
现在，我们可以开始配置 Prisma。首先，我们将使用 Prisma CLI 创建一个新的 Prisma 项目：
npx prisma init
然后，我们需要定义数据模型。在 prisma/schema.prisma 文件中，我们将添加以下内容：
-- -------------------- ---- ------- ---------- -- - -------- - ------------ --- - ------------------- - --------- ------ - -------- - ------------------ - ----- ---- - -- --- --- ------------------------- ---- ------ ----- ------ ------- -------- ------ -
这个数据模型定义了一个 User 模型，它具有 id、name、email 和 password 字段。我们还定义了一个名为 db 的数据源，它使用我们在 .env 文件中定义的数据库 URL。
现在，我们可以使用 Prisma CLI 来生成 Prisma 客户端：
npx prisma generate
这将生成一个名为 @prisma/client 的 npm 包，我们可以在代码中使用它来操作数据库。
定义 GraphQL API
接下来，我们将使用 GraphQL Yoga 来定义我们的 API。在 pages/api/graphql.js 文件中，我们将添加以下内容：
-- -------------------- ---- -------
------ - ------------- - ---- --------------
------ - ------------ - ---- ----------------
----- ------ - --- --------------
----- --------- - -
------ -
------ ----- -- -- -
------ ----- ----------------------
--
----- ----- --- - -- -- -- -
------ ----- --------------------- ------ - -- - --
--
--
--------- -
----------- ----- --- - ---- -- -- -
------ ----- -------------------- ---- --
--
----------- ----- --- - --- ---- -- -- -
------ ----- -------------------- ------ - -- -- ---- --
--
----------- ----- --- - -- -- -- -
------ ----- -------------------- ------ - -- - --
--
--
-
----- ------ - --- ---------------
--------- -----------------------
----------
--
--------------- -- ------------------- -- ------- -- ------------------------这个文件定义了一个 GraphQL 服务器，它包含一个名为 users 的查询和 createUser、updateUser 和 deleteUser 等操作。我们还定义了一个名为 user 的查询，它接受一个 id 参数并返回一个具有该 ID 的用户。这些操作都使用 Prisma 客户端来操作数据库。
我们还需要在 src/schema.graphql 文件中定义我们的 GraphQL 模式：
-- -------------------- ---- ------- ---- ----- - ------ -------- -------- ------ ---- - ---- -------- - ---------------- ------------------ ----- -------------- ----- ----- ------------------ ----- -------------- ------ ----- - ----- --------------- - ----- ------- ------ ------- --------- ------- - ----- --------------- - ----- ------ ------ ------ --------- ------ - ---- ---- - --- ---- ----- ------- ------ ------- --------- ------- -
这个文件定义了我们的 GraphQL 模式，它包含一个名为 users 的查询和 createUser、updateUser 和 deleteUser 等操作。我们还定义了一个名为 user 的查询，它接受一个 id 参数并返回一个具有该 ID 的用户。这些操作都使用 Prisma 客户端来操作数据库。
构建示例应用程序
现在，我们可以构建一个完整的示例应用程序，以演示如何将这些技术组合在一起。
首先，我们将创建一个 pages/index.js 文件，它将包含我们的首页。我们将使用 React 和 Next.js 来构建一个简单的登录表单：
-- -------------------- ---- -------
------ - -------- - ---- -------
------ ------- -------- ------ -
----- ------- --------- - ------------
----- ---------- ------------ - ------------
----- ------------ - ------- -- -
----------------------
--------------------- ------ ---------
-
------ -
----- ------------------------
-----
------ ------------------------------
------ ------------ ---------- ------------- ----------------- -- ----------------------------- --
------
-----
------ ------------------------------------
------ --------------- ------------- ---------------- ----------------- -- -------------------------------- --
------
------- ----------------------------
-------
-
-这个文件定义了一个名为 Home 的 React 组件，它包含一个简单的登录表单。我们使用 useState 钩子来管理表单字段，并使用 handleSubmit 函数来处理表单提交事件。
接下来，我们将创建一个名为 lib/prisma.js 的文件，它将包含我们的 Prisma 客户端实例：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
--- ------
-- --------------------- --- ------------- -
------ - --- --------------
- ---- -
-- ---------------- -
------------- - --- --------------
-
------ - -------------
-
------ ------- ------这个文件定义了一个名为 prisma 的单例对象，它使用 PrismaClient 类创建一个新的 Prisma 客户端。如果我们正在生产环境中运行代码，我们将创建一个新的 Prisma 客户端实例。否则，我们将使用全局变量来保存客户端实例，并在需要时重用它。
接下来，我们将创建一个名为 pages/api/login.js 的文件，它将处理我们的登录逻辑：
-- -------------------- ---- -------
------ ------ ---- ------------------
------ ------- ----- -------- ------------ ---- -
-- ----------- --- ------- -
----- - ------ -------- - - --------
----- ---- - ----- --------------------- ------ - ----- - --
-- ------ -- ------------- --- --------- -
------ ---------------------- -------- -------- ------------ --
-
---------------------- -------- ------ ----------- --
- ---- -
---------------------- -------- ------- --- -------- --
-
-这个文件定义了一个名为 handler 的函数，它接受一个 req 和 res 对象，并根据请求方法来处理登录逻辑。如果请求方法为 POST，我们将从请求正文中提取 email 和 password 字段，并使用 Prisma 客户端来查找具有该电子邮件地址的用户。如果找不到用户或密码不正确，我们将返回一个 401 Unauthorized 响应。否则，我们将返回一个 200 OK 响应。
最后，我们将更新我们的 pages/index.js 文件，以使用 fetch API 来发送登录请求：
-- -------------------- ---- -------
------ - -------- - ---- -------
------ ------- -------- ------ -
----- ------- --------- - ------------
----- ---------- ------------ - ------------
----- ------------ - ----- ------- -- -
----------------------
----- -------- - ----- ------------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------ -------- ---
--
-- -------------- -
-------------------- --------- ---------------- --------------------
------
-
------------------ ------------
-
------ -
----- ------------------------
-----
------ ------------------------------
------ ------------ ---------- ------------- ----------------- -- ----------------------------- --
------
-----
------ ------------------------------------
------ --------------- ------------- ---------------- ----------------- -- -------------------------------- --
------
------- ----------------------------
-------
-
-这个文件更新了我们的 handleSubmit 函数，以使用 fetch API 来发送登录请求。如果请求成功，我们将在控制台中打印一条消息。
结论
在本文中，我们介绍了如何使用 Prisma 和 GraphQL Yoga 构建 Next.js 应用程序。我们讨论了安装和配置、定义数据模型和 GraphQL API，以及构建一个完整的示例应用程序。这些技术的结合使得构建现代化的 Web 应用程序变得更加容易和高效。如果您正在寻找一种简单而强大的方式来管理数据库和构建 API，那么 Prisma 和 GraphQL Yoga 是一个非常不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67443f06c22b09372b10951f