在 RedwoodJS 中使用 Supabase

Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.

AI Prompt

Help me add Supabase to my RedwoodJS project. Create a Supabase project at database.new and copy the Transaction and Session pooler connection strings. Then: 1. Run `yarn create redwood-app my-app --ts` to scaffold the app. 2. Set `DATABASE_URL` (Transaction pooler with `?pgbouncer=true`) and `DIRECT_URL` (Session pooler) in `.env`. 3. Update `api/db/schema.prisma` to use the PostgreSQL datasource with those env vars. 4. Add an `Instrument` model to the Prisma schema and run `yarn rw prisma migrate dev`. 5. Update `scripts/seed.ts` with instrument data and run `yarn rw prisma db seed`. 6. Run `yarn rw g scaffold instrument` to scaffold the CRUD UI. 7. Run `yarn rw dev` and open http://localhost:8910/instruments. REFERENCE https://supabase.com/docs/guides/getting-started/quickstarts/redwoodjs.md

1. 创建一个 Supabase 项目 #

🌐 1. Create a Supabase project

首先，你需要一个 Supabase 项目。

🌐 To start, you need a Supabase project.

从你所属的任何组织的仪表板创建一个新的 Supabase 项目。

🌐 Create a new Supabase project from the Dashboard of any organization you belong to.

想通过编程创建一个项目吗？

使用管理 API 或向 MCP 服务器请求创建一个新的 Supabase 项目。

🌐 Use the Management API or ask the MCP server to create a new Supabase project.

安全地保存你的数据库密码。你连接数据库时需要它。

🌐 Save your database password securely. You need it for the connection string.

2. 收集数据库连接字符串 #

🌐 2. Gather database connection strings

打开项目的 Connect 面板。这个快速入门使用 Transaction pooler 和 Session pooler 模式进行连接。事务模式用于应用查询，Session 模式则用于使用 Prisma 运行迁移。

🌐 Open the project Connect panel. This quickstart connects using the Transaction pooler and Session pooler mode. Transaction mode is used for application queries and Session mode is used for running migrations with Prisma.

要做到这一点，在数据库设置页面将连接模式设置为 Transaction，然后复制连接字符串并添加 ?pgbouncer=true&connection_limit=1。pgbouncer=true 会禁止 Prisma 生成预处理语句。这是必要的，因为我们的连接池目前在事务模式下还不支持预处理语句。只有在从无服务器环境使用 Prisma 时，才需要 connection_limit=1 参数。这就是事务模式的连接字符串。

🌐 To do this, set the connection mode to Transaction in the Database Settings page and copy the connection string and append ?pgbouncer=true&connection_limit=1. pgbouncer=true disables Prisma from generating prepared statements. This is required since our connection pooler does not support prepared statements in transaction mode yet. The connection_limit=1 parameter is only required if you are using Prisma from a serverless environment. This is the Transaction mode connection string.

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

🌐 To get the Session mode connection pooler string, change the port of the connection string from the dashboard to 5432.

你需要交易模式连接字符串和会话模式连接字符串来在第6步设置环境变量。

🌐 You will need the Transaction mode connection string and the Session mode connection string to set up environment variables in Step 6.

你可以在后续步骤需要时，从 Supabase 仪表板复制并粘贴这些连接字符串。

🌐 You can copy and paste these connection strings from the Supabase Dashboard when needed in later steps.

3. 创建一个 RedwoodJS 应用 #

🌐 3. Create a RedwoodJS app

用 TypeScript 创建一个 RedwoodJS 应用。

🌐 Create a RedwoodJS app with TypeScript.

创建 RedwoodJS 应用需要使用 yarn 包管理器。你之后会用它来运行 RedwoodJS 命令。

🌐 The yarn package manager is required to create a RedwoodJS app. You will use it to run RedwoodJS commands later.

虽然推荐使用 TypeScript，但如果你想要一个 JavaScript 应用，可以省略 --ts 标志。

🌐 While TypeScript is recommended, If you want a JavaScript app, omit the --ts flag.

1
yarn create redwood-app my-app --ts

4. 安装 Supabase 的代理技能（可选） #

🌐 4. Install Supabase's Agent Skills (optional)

Supabase 的 Agent Skills 是一套精心整理的指令，给你的 AI 代理提供关于如何使用 Supabase 的操作知识。

🌐 Supabase's Agent Skills is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.

安装它们，这样你的 AI 编码代理就能使用当前的 Supabase 模式（比如认证、服务端渲染和数据库迁移）生成更准确、更可靠的代码，而不只是依赖培训数据。

🌐 Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.

要安装，在你项目的根目录运行以下命令：

🌐 To install, run the following command in the root of your project:

1
npx skills add supabase/agent-skills

5. 安装 MCP 服务器（可选） #

🌐 5. Install MCP server (optional)

Supabase MCP 服务器将 AI 助手连接到 Supabase，让你能够代表自己与项目互动。想了解如何将它添加到你的客户端，请查看 MCP 文档。

🌐 The Supabase MCP server connects AI assistants to Supabase, allowing you to interact with your projects on your behalf. Find out more on how to add it to your client in the MCP docs.

6. 配置环境变量 #

🌐 6. Configure environment variables

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

🌐 In your .env file, add the following environment variables for your database connection:

DATABASE_URL 应该使用你在步骤2中复制的事务模式连接字符串。
DIRECT_URL 应该使用你在步骤2中复制的会话模式连接字符串。

.env

1
# Transaction mode connection string — used by Prisma Client for app queries
2
DATABASE_URL="postgres://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@aws-[REGION].pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"
3
4
# Session mode connection string — used by Prisma Migrate
5
DIRECT_URL="postgres://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@aws-[REGION].pooler.supabase.com:5432/postgres"

7. 更新你的 Prisma 模式 #

🌐 7. Update your Prisma schema

默认情况下，RedwoodJS 搭配的是 SQLite 数据库，但我们想用 Postgres。

🌐 By default, RedwoodJS ships with a SQLite database, but we want to use Postgres.

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

🌐 Update your Prisma schema file api/db/schema.prisma to use your Supabase Postgres database connection environment variables you set up in Step 6.

api/db/schema.prisma

1
datasource db {
2
  provider  = "postgresql"
3
  url       = env("DATABASE_URL")
4
  directUrl = env("DIRECT_URL")
5
}

8. 创建仪器模型并应用模式迁移 #

🌐 8. Create the instrument model and apply a schema migration

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

🌐 Create the Instrument model in api/db/schema.prisma and then run yarn rw prisma migrate dev from your terminal to apply the migration.

api/db/schema.prisma

1
model Instrument {
2
  id   Int    @id @default(autoincrement())
3
  name String @unique
4
}

9. 更新种子脚本 #

🌐 9. Update seed script

在数据库里添加几个乐器数据。

🌐 Seed the database with a few instruments.

更新文件 scripts/seed.ts，把下面的代码放进去：

🌐 Update the file scripts/seed.ts to contain the following code:

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
}

10. 给你的数据库填充初始数据 #

🌐 10. Seed your database

运行种子数据库命令，将你创建的乐器填充到 Instrument 表中。

🌐 Run the seed database command to populate the Instrument table with the instruments you created.

重置数据库命令 yarn rw prisma db reset 会重新创建表格，并且执行种子脚本。

🌐 The reset database command yarn rw prisma db reset recreates the tables and also runs the seed script.

1
yarn rw prisma db seed

11. 搭建仪器界面 #

🌐 11. Scaffold the instrument UI

使用 RedwoodJS 生成器为 Instrument 模型生成一个 CRUD 界面。

🌐 Use RedwoodJS generators to scaffold a CRUD UI for the Instrument model.

1
yarn rw g scaffold instrument

12. 启动应用 #

🌐 12. Start the app

通过 yarn rw dev 启动应用。浏览器会打开 RedwoodJS 启动画面。

🌐 Start the app via yarn rw dev. A browser will open to the RedwoodJS Splash page.

13. 查看乐器界面 #

🌐 13. View instruments UI

点击 /instruments 访问 http://localhost:8910/instruments，你应该可以看到乐器列表。

🌐 Click on /instruments to visit http://localhost:8910/instruments where should see the list of instruments.

你现在可以使用搭建好的界面来编辑、删除和添加新乐器了。

🌐 You may now edit, delete, and add new instruments using the scaffolded UI.

下一步 #

🌐 Next steps

为你的应用设置 Auth
把更多数据插入到你的数据库里
使用 Storage 上传和提供静态文件