入门

使用 Supabase 与 RedwoodJS

了解如何创建一个 Supabase 项目，使用 Prisma 迁移和种子数据向你的数据库添加一些示例数据，以及从 RedwoodJS 应用查询数据。

1

设置你的新的 Supabase 项目

在 Supabase 控制面板中创建一个新项目。

New project for redwoodjs

2

收集数据库连接字符串

打开项目 连接 面板。此快速入门使用 事务池化器 和 会话池化器 模式进行连接。事务模式用于应用程序查询，会话模式用于使用 Prisma 运行迁移。

为此，在 数据库设置页面 中将连接模式设置为 Transaction，并复制连接字符串，然后附加 ?pgbouncer=true&&connection_limit=1。 pgbouncer=true 会禁用 Prisma 生成预处理语句。由于我们的连接池化器尚未在事务模式下支持预处理语句，因此这是必需的。 connection_limit=1 参数仅在你从无服务器环境使用 Prisma 时才需要。这是事务模式连接字符串。

要获取会话模式连接池化器字符串，请将仪表板中的连接字符串端口更改为 5432。

你需要在步骤 5 中设置环境变量时使用事务模式连接字符串和会话模式连接字符串。

pooled connection for redwoodjs

3

创建一个 RedwoodJS 应用

使用 TypeScript 创建一个 RedwoodJS 应用。

终端
1
yarn create redwood-app my-app --ts
4

在 VS Code 中打开你的 RedwoodJS 应用

你将在 VS Code 中开发你的应用、管理数据库迁移并运行你的应用。

终端
1
cd my-app
2
code .
5

配置环境变量

在你的 .env 文件中，添加以下环境变量用于你的数据库连接

  • DATABASE_URL 应该使用你在步骤 1 中复制的事务模式连接字符串。

  • DIRECT_URL 应该使用你在步骤 1 中复制的会话模式连接字符串。

.env
1
# Transaction mode connection string used for migrations
2
DATABASE_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"
3
4
# Session mode connection string — used by Prisma Client
5
DIRECT_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabase.com:5432/postgres"
6

更新你的 Prisma Schema

默认情况下，RedwoodJS 附带一个 SQLite 数据库，但我们想要使用 Postgres。

更新你的 Prisma schema 文件 api/db/schema.prisma 以使用你在步骤 5 中设置的 Supabase Postgres 数据库连接环境变量。

api/db/schema.prisma
1
datasource db {
2
  provider  = "postgresql"
3
  url       = env("DATABASE_URL")
4
  directUrl = env("DIRECT_URL")
5
}
7

创建 Instrument 模型并应用 schema 迁移

在 api/db/schema.prisma 中创建 Instrument 模型，然后从你的终端运行 yarn rw prisma migrate dev 以应用迁移。

api/db/schema.prisma
1
model Instrument {
2
  id   Int    @id @default(autoincrement())
3
  name String @unique
4
}
8

更新 seed 脚本

让我们用一些乐器来填充数据库。

更新文件 scripts/seeds.ts 以包含以下代码

scripts/seed.ts
1
import type { Prisma } from '@prisma/client'
2
import { db } from 'api/src/lib/db'
3
4
export default async () => {
5
  try {
6
    const data: Prisma.InstrumentCreateArgs['data'][] = [
7
      { name: 'dulcimer' },
8
      { name: 'harp' },
9
      { name: 'guitar' },
10
    ]
11
12
    console.log('Seeding instruments ...')
13
14
    const instruments = await db.instrument.createMany({ data })
15
16
    console.log('Done.', instruments)
17
  } catch (error) {
18
    console.error(error)
19
  }
20
}
9

填充你的数据库

运行 seed 数据库命令以使用你刚刚创建的乐器填充 Instrument 表。

终端
1
yarn rw prisma db seed
10

搭建 Instrument UI

现在，我们将使用 RedwoodJS 生成器为 Instrument 模型搭建一个 CRUD UI。

终端
1
yarn rw g scaffold instrument
11

启动应用

通过 yarn rw dev 启动应用。浏览器将打开到 RedwoodJS 启动页面。

RedwoodJS Splash Page

12

查看乐器 UI

点击 /instruments 访问 https://:8910/instruments，你应该会看到乐器列表。

你现在可以使用搭建的 UI 编辑、删除和添加新的乐器。