使用 TypeScript、PostgreSQL、Next.js、Prisma 和 GraphQL 构建全栈应用：数据建模

目录

• 简介
  • 本课程将涵盖的内容
  • 您今天将学到的内容
• 先决条件
  • 假定的知识
  • 开发环境
• 克隆仓库
  • 项目结构和依赖项概览
• 为应用创建数据模型
  • 将 Prisma 添加到您的项目
  • 使用 Prisma 创建数据库模式
  • 定义模型
  • 定义关系
• 迁移并将更改推送到数据库
• 播种数据库
• 使用 Prisma Studio 探索您的数据库
• 总结和后续步骤

简介

在本课程中，您将学习如何构建“awesome-links”，这是一个全栈应用，用户可以在其中浏览精选链接列表并收藏他们喜欢的链接。

该应用使用以下技术构建

• Next.js 作为 React 框架
• GraphQL Yoga 作为 GraphQL 服务器
• Pothos 用于构建 GraphQL 模式
• Apollo Client 作为 GraphQL 客户端
• Prisma 作为 ORM，用于迁移和数据库访问
• PostgreSQL 作为数据库
• AWS S3 用于上传图片
• Auth0 用于身份验证
• TypeScript 作为编程语言
• TailwindCSS 一个实用至上的 CSS 框架
• Vercel 用于部署

本课程将涵盖的内容

• 使用 Prisma 进行数据建模
• 在 Next.js API 路由中使用 GraphQL Yoga 和 Pothos 构建 GraphQL API 层
• GraphQL 分页
• 使用 Auth0 进行身份验证
• 授权
• 使用 AWS S3 上传图片
• 部署到 Vercel

您今天将学到的内容

在本课程的第一篇文章中，我们将首先定义应用的需求，并使用 Prisma 设置数据库层。

先决条件

假定的知识

本课程假设

• Node.js 的基础知识。
• 关系型数据库的基本理解。如果您想在本课程之前了解更多关于数据库的信息，请查看 Prisma 的数据指南，以了解更多关于数据库如何工作、如何选择合适的数据库以及如何充分利用数据库与您的应用程序。
• 强烈建议掌握 React 知识，因为我们将使用 Next.js。

本课程不需要

• TypeScript 知识，假设您已经有 JavaScript 经验。
• Prisma 知识，因为本课程将对此进行解释。

最后，本课程使用 PostgreSQL 作为数据库，但是，大多数概念可以应用于其他关系型数据库，例如 MySQL。

到本文结束时，您将拥有一个连接到数据库的 Next.js 应用。

开发环境

要学习本课程，您需要在您的机器上安装 Node.js。您还需要有一个正在运行的 PostgreSQL 实例。

注意：您可以本地设置 PostgreSQL，或在 Heroku 上创建一个托管实例。部署章节将需要远程数据库。

克隆仓库

本课程的完整源代码可以在 GitHub 上找到。

注意：每篇文章都有一个对应的分支，因此您可以跟随文章进行学习。通过检出 part-1 分支，您将拥有与本文相同的起点。

要开始使用，请导航到您选择的目录，并运行以下命令来克隆仓库

您现在可以导航到克隆的目录，安装依赖项并启动开发服务器

这是启动器项目的样子

项目结构和依赖项概览

查看项目，我们看到以下文件夹结构

这个启动器项目是一个安装了 TypeScript 和 TailwindCSS 的 Next.js 应用。

Next.js 是一个全栈 React 框架，支持不同的数据获取策略。第一个是服务器端渲染，我们在每次请求时获取数据。或者，您可以在构建时获取数据，并拥有一个可以由 CDN 提供的静态网站。在这个应用中，我们将进行服务器端数据获取。

Next.js 使用基于文件的路由，其中 pages 目录中的每个文件都是一个路由。我们目前在 https://127.0.0.1:3000 有一个索引页，在 https://127.0.0.1:3000/about 有一个关于页面。

_app.tsx 文件用于覆盖默认的 App 行为。此文件允许您在页面更改之间持久化布局，添加全局 CSS 等。

当导航到 https://127.0.0.1:3000 时我们看到的数据在 /data/links.ts 文件中硬编码。在接下来的部分中，数据将使用 GraphQL API 从数据库动态获取。

为应用创建数据模型

数据库将具有以下实体，其中每个实体将映射到数据库中的一个表。

• User：具有帐户的人。他们可以收藏他们喜欢的链接，并且可以是管理员或普通用户。
• Link：表示链接的不同属性，例如标题、描述和 URL。

在 User 和 Link 实体之间存在多对多（也称为 m-n）关系。这样，一个用户可以拥有多个链接，一个链接也可以拥有多个用户。

将 Prisma 添加到您的项目

我们将使用 Prisma 创建数据库表。它是一个 ORM，可用于与数据库交互。

要开始使用，首先将 Prisma 的 CLI 作为开发依赖项安装

您现在可以使用 Prisma CLI 通过运行以下命令创建基本的 Prisma 设置

一个新的 /prisma 目录被创建，在其中您将找到一个 schema.prisma 文件。这是您的主 Prisma 配置文件，其中将包含您的数据库模式。.env (dotenv) 文件也添加到项目的根目录。您可以在其中定义环境变量，例如数据库连接 URL 或访问令牌。

打开 .env 文件，并将虚拟连接 URL 替换为您的 PostgreSQL 数据库的连接 URL。

您刚刚添加的数据库 URL 具有以下结构

使用 Prisma 创建数据库模式

当您打开 /prisma/schema.prisma 文件时，您将找到以下模式

注意：此文件使用 PSL (Prisma Schema Language)。为了获得最佳的开发体验，请确保您安装了我们的 VSCode 扩展，它为 .prisma 文件添加了语法高亮、格式化、自动完成、跳转到定义和 linting。

在 datasource 字段中，我们指定我们正在使用 PostgreSQL，并且我们正在从 .env 文件加载数据库 URL。

接下来，在 generator 块中，我们指定我们想要基于我们的数据模型生成 Prisma Client。

Prisma Client 是一个自动生成且类型安全的查询构建器；我们将看到它如何简化数据库操作。

定义模型

让我们创建 User 模型

注意：模型通常以 PascalCase 拼写，并且应使用单数形式。（例如，User 而不是 user、users 或 Users）

这里我们定义了一个具有多个字段的 User 模型。每个字段都有一个名称，后跟一个类型和可选字段属性。

例如，id 字段的类型为 String，并具有 @id 字段属性，指定这是表的主键。@default(uuid()) 属性设置默认的 UUID 值。

默认情况下，所有字段都是必需的。要使字段可选，您可以在字段类型后添加 ?。

Role 枚举用于表示用户是否为管理员，然后在 User 模型中引用。

接下来，我们将创建 Link 模型

定义关系

最后，我们需要在 User 和 Link 模型之间创建多对多关系，以便用户可以拥有多个链接，链接也可以拥有多个用户。我们通过在关系的双方定义关系字段作为列表来实现这一点。

我们将向 User 模型添加一个 bookmarks 字段，其类型为 Link[]。然后我们向 Link 模型添加一个 users 字段，其类型为 User[]。

这是一个隐式多对多关系，我们在底层数据库中有一个关系表。这个关系表由 Prisma 管理。

这是最终模式的样子

迁移并将更改推送到数据库

要在数据库中创建这些表，您将使用 prisma migrate dev 命令

该命令执行以下操作

• 生成一个新的名为 init 的 SQL 迁移
• 将迁移应用于数据库
• 如果尚未安装 Prisma Client，则安装它
• 基于当前模式生成 Prisma Client

如果 Prisma Client 未自动安装，您可以使用以下命令安装它

在 prisma 目录中，您会注意到一个新的文件夹，名为 migrations。它还应包含另一个以 init 结尾的文件夹，其中包含一个名为 migration.sql 的文件。migration.sql 文件包含生成的 SQL。

播种数据库

由于数据库当前为空，我们希望使用数据填充它。您将使用 Prisma Client，一个类型安全的查询构建器，与您的数据库交互并使用示例数据填充它。

创建一个名为 /prisma/seed.ts 的新文件。在此文件中，导入 Prisma Client，实例化它并创建一些记录

我们首先使用 create() 函数创建一个用户，该函数创建一个新的数据库记录。

接下来，我们使用 createMany() 函数创建多个记录。我们将我们拥有的硬编码数据作为参数传递。

默认情况下，Next.js 强制使用 ESNext 模块，我们需要覆盖此行为，否则我们将无法执行播种脚本。为此，首先安装 ts-node 作为开发依赖项

然后在 tsconfig.json 文件中，指定 ts-node 将使用 CommonJS 模块

通过添加带有 seed 属性的 prisma 键来更新您的 package.json 文件，该属性定义用于播种数据库的脚本

如果一切正常，您应该看到以下输出

使用 Prisma Studio 探索您的数据库

Prisma 附带 Prisma Studio，一个用于探索和操作您的数据的 GUI。您可以使用它来查看、创建、更新或删除数据库中的数据。

要启动 Prisma Studio，请运行以下命令

如果您已正确完成所有步骤，您应该在数据库中拥有 Link 和 User 模型。在 Link 模型中，您会找到 4 条记录，而在 User 模型中，您会找到 1 条记录。

总结和后续步骤

在本文中，我们解释了问题域，并使用 Prisma 对我们的数据进行了建模。我们还播种了数据库，并使用 Prisma Studio 探索了它。现在我们有一个连接到 PostgreSQL 数据库的 Next.js 应用。

在下一部分课程中，我们将学习

• GraphQL 及其在构建 API 时相对于 REST 的优势。
• 使用 GraphQL Yoga 和 Pothos 为我们的应用构建 GraphQL API
• 在客户端使用 Apollo Client 消费 API。
• GraphQL 分页，以便我们不会一次加载所有链接并获得更好的性能。