如何使用 Prisma ORM 搭配 TanStack Start
簡介
Prisma ORM 簡化了資料庫互動，而 TanStack Start 則為建構現代化 React 應用程式提供了強大的框架。搭配 Prisma Postgres，它們能透過型別安全的查詢和高效的資料管理，提供流暢的全端開發體驗。
本指南將引導您從零開始，將 Prisma ORM 與 Prisma Postgres 資料庫整合到 TanStack Start 專案中。
先決條件
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 中，我們待辦事項 (todos) 的模型定義在 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 Client 產生器
現在，執行以下指令來建立資料庫表格
npm run db:seed -- --name init
2.3. 為資料庫進行種子植入 (Seed)
產生專案所需的 Prisma Client；
npm run db:generate
然後使用 prisma/ 目錄下的 seed.ts 檔案來植入專案資料。
npm run db:seed
並開啟 Prisma Studio 來檢視您的資料
npm run db:studio
3. 將 Prisma 整合至 TanStack Start
3.1 Prisma Client
與其在每個檔案中建立新的 Prisma Client 實例，TanStack Start 擁有一個 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 顯示待辦事項
接下來，您將更新首頁以顯示從資料庫檢索到的資料。
遍歷 (map) 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 上交流 透過為存放庫加星標、報告問題或為 issue 做出貢獻。