如何在 TanStack Start 中使用 Prisma ORM
介绍
Prisma ORM 简化了数据库交互，而 TanStack Start 则提供了一个强大的框架，用于构建现代 React 应用程序。它们与 Prisma Postgres 结合使用，通过类型安全查询和高效数据管理，提供无缝的全栈开发体验。
本指南将引导您从头开始，在 TanStack Start 项目中集成 Prisma ORM 和 Prisma Postgres 数据库。
先决条件
1. 设置项目
首先，创建一个新的 TanStack Start 项目。
npm create @tanstack/start@latest
- 您想为项目命名什么？ tanstack-start-prisma
- 您想使用 Tailwind CSS 吗？ 否
- 选择工具链 无
- 选择部署适配器 Nitro
- 您希望项目有哪些附加组件？ Prisma
- 您想要任何示例吗？ 否
- Prisma：数据库提供商 Prisma PostgresSQL
这将创建一个名为 tanstack-start-prisma 的新文件夹，并为您创建一个新的 Prisma Postgres 数据库。最终的数据库连接字符串将被打印出来。
● Database Connection
│
│ Connection String:
│
│ postgresql://b4889.....
│
复制此连接字符串，并在 .env.local 中设置 DATABASE_URL 变量
# Database URL for PostgreSQL
DATABASE_URL="postgresql://b4889....."
2. 配置 Prisma
2.1. 定义您的 Prisma Schema
在 schema.prisma 中，我们的待办事项模型定义在 generator 和 datasource 块之下
generator client {
provider = "prisma-client"
output = "../app/generated/prisma"
}
datasource db {
provider = "postgresql"
}
model Todo {
id Int @id @default(autoincrement())
title String
createdAt DateTime @default(now())
}
这会创建一个将推送到数据库的 Todo 模型
2.2. 配置 Prisma 客户端生成器
现在，运行以下命令来创建数据库表
npm run db:seed -- --name init
2.3. 填充数据库
生成项目所需的 Prisma 客户端；
npm run db:generate
然后使用 prisma/ 目录中的 seed.ts 文件填充项目
npm run db:seed
并打开 Prisma Studio 检查您的数据
npm run db:studio
3. 将 Prisma 集成到 TanStack Start
3.1 Prisma 客户端
TanStack Start 不会在每个文件中创建新的 Prisma 客户端实例，而是有一个 db.ts 文件，它创建一个可以全局共享的单一实例
import { PrismaClient } from './generated/prisma/client.js'
import { PrismaPg } from '@prisma/adapter-pg'
const adapter = new PrismaPg({
connectionString: process.env.DATABASE_URL!,
})
declare global {
var __prisma: PrismaClient | undefined
}
export const prisma = globalThis.__prisma || new PrismaClient({ adapter })
if (process.env.NODE_ENV !== 'production') {
globalThis.__prisma = prisma
}
3.2 加载时获取数据
首先，导入必要的模块。然后，使用 createServerFn 函数创建一个服务器函数。此函数将使用 .findMany() 方法从数据库中获取数据
import { createFileRoute } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { prisma } from '../db';
export const Route = createFileRoute("/")({
component: Home,
});
const getTodos = createServerFn({ method: "GET" }).handler(async () => {
return prisma.todo.findMany();
});
function Home() {
return (
<div>
</div>
);
}
TanStack Start 允许函数在加载时与 createFileRoute 函数中的 loader 函数一起运行。使用此代码在加载时获取用户及其帖子
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import { prisma } from '../db';
export const Route = createFileRoute("/")({
component: Home,
loader: () => {
return getTodos();
},
});
const getTodos = createServerFn({ method: "GET" }).handler(async () => {
return prisma.todo.findMany();
});
function Home() {
return (
<div>
<h1>Todos</h1>
</div>
);
}
使用 Route.useLoaderData() 将 loader 的响应存储在主组件中
import { createServerFn } from "@tanstack/react-start";
import { createFileRoute } from "@tanstack/react-router";
import { prisma } from '../db';
export const Route = createFileRoute("/")({
component: Home,
loader: () => {
return getTodos();
},
});
const getTodos = createServerFn({ method: "GET" }).handler(async () => {
return prisma.todo.findMany();
});
function Home() {
const todos = Route.useLoaderData();
return (
<div>
<h1>Todos</h1>
</div>
);
}
3.3 显示待办事项
接下来，您将更新主页以显示从数据库中检索到的数据。
遍历 todos 并在列表中显示它们
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import { prisma } from '../db';
export const Route = createFileRoute('/')({
component: App,
loader: () => getTodos(),
});
const getTodos = createServerFn({ method: 'GET' }).handler(async () => {
return prisma.todo.findMany();
});
function App() {
const todos = Route.useLoaderData();
return (
<div>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</div>
);
}
此设置将显示您的页面上的待办事项，这些待办事项直接从您的数据库中获取。
后续步骤
您已成功将 Prisma ORM 与 TanStack Start 集成，创建了一个无缝的全栈应用程序。以下是一些您可以继续操作的建议
- 扩展您的 Prisma 模型以处理更复杂的数据关系。
- 实施额外的 CRUD 操作以增强您的应用程序功能。
- 探索 Prisma 和 TanStack Start 的更多功能以加深您的理解。
- 查看 Prisma Postgres 以了解如何扩展您的应用程序。
更多信息
与 Prisma 保持联系
通过以下方式与我们保持联系，继续你的 Prisma 之旅： 我们的活跃社区。保持信息灵通，参与其中，并与其他开发人员协作。
- 在 X 上关注我们 获取公告、直播活动和实用技巧。
- 加入我们的 Discord 提问、与社区交流，并通过对话获得积极支持。
- 在 YouTube 上订阅 获取教程、演示和直播。
- 在 GitHub 上参与 加星收藏存储库、报告问题或为问题做出贡献。