如何使用 Prisma ORM 搭配 SvelteKit
簡介
Prisma ORM 透過型別安全（type-safe）的查詢簡化了資料庫存取，當它與 SvelteKit 搭配使用時，能建立強大且可擴展的全端架構。
在本指南中，您將學習如何在 SvelteKit 專案中從零開始整合 Prisma ORM 與 Prisma Postgres 資料庫。您可以在 GitHub 上找到本指南的完整範例。
先決條件
- Node.js 20+
- Svelte VSCode 擴充功能（Svelte 官方推薦）
1. 設定您的專案
您將使用 Svelte CLI 而非 npx create svelte@latest。此 CLI 提供更具互動性的設定流程，並內建對 ESLint 和 Prettier 等熱門工具的支援。
建立新的 Svelte 專案
npx sv create sveltekit-prisma
它會提示您自訂設定。以下是您將選擇的選項：
- 您想要哪個模板？
SvelteKit minimal - 是否加入 TypeScript 型別檢查？
Yes, using TypeScript syntax - 您想要加入哪些套件到您的專案中？
prettiereslint
- 您要使用哪個套件管理器來安裝依賴項目？
npm
設定完成後，進入您的專案目錄並啟動開發伺服器。
cd sveltekit-prisma
npm run dev
就這樣！Svelte 讓啟動專案的過程變得非常簡單。此時，您的專案已準備好整合 Prisma 並連接到 Prisma Postgres 資料庫。
2. 安裝與設定 Prisma
2.1. 安裝依賴項目
要開始使用 Prisma，您需要安裝一些依賴項目
npm install prisma tsx @types/pg --save-dev
npm install @prisma/client @prisma/adapter-pg dotenv pg
如果您使用的是不同的資料庫提供者（MySQL、SQL Server、SQLite），請安裝相應的驅動程式適配器套件，而不是 @prisma/adapter-pg。如需更多資訊，請參閱資料庫驅動程式。
安裝完成後，在您的專案中初始化 Prisma
npx prisma init --db --output src/generated/prisma
在設定 Prisma Postgres 資料庫時，您需要回答幾個問題。請選擇離您最近的區域，並為您的資料庫取一個好記的名稱，例如「My SvelteKit Project」。
這將建立：
- 一個包含
schema.prisma檔案的prisma目錄。 - 一個用於設定 Prisma 的
prisma.config.ts檔案 - 一個 Prisma Postgres 資料庫。
- 一個在專案根目錄下包含
DATABASE_URL的.env檔案。 - 一個用於存放生成的 Prisma Client 的
output目錄，位於src/generated/prisma。
2.2. 定義您的 Prisma Schema
在 prisma/schema.prisma 檔案中，加入下列模型並將 generator 修改為使用 prisma-client 提供者
generator client {
provider = "prisma-client"
output = "../src/generated/prisma"
}
datasource db {
provider = "postgresql"
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
authorId Int
author User @relation(fields: [authorId], references: [id])
}
這會建立兩個模型：User 和 Post，且兩者之間具有一對多關係。
2.3 在 prisma.config.ts 加入 dotenv
要存取 .env 檔案中的變數，可以透過執行階段載入，或是使用 dotenv。在 prisma.config.ts 的頂部包含一個 dotenv 的匯入：
import 'dotenv/config'
import { defineConfig, env } from 'prisma/config';
export default defineConfig({
schema: 'prisma/schema.prisma',
migrations: {
path: 'prisma/migrations',
},
datasource: {
url: env('DATABASE_URL'),
},
});
2.4. 設定 Prisma Client 生成器
現在，執行以下指令來建立資料庫表格並產生 Prisma Client
npx prisma migrate dev --name init
npx prisma generate
2.5. 進行資料庫植入 (Seed)
加入一些種子資料，以在資料庫中填充範例使用者與貼文。
在 prisma/ 目錄中建立一個名為 seed.ts 的新檔案
import { PrismaClient, Prisma } from "../src/generated/prisma/client.js";
import { PrismaPg } from "@prisma/adapter-pg";
const adapter = new PrismaPg({
connectionString: process.env.DATABASE_URL!,
});
const prisma = new PrismaClient({
adapter,
});
const userData: Prisma.UserCreateInput[] = [
{
name: "Alice",
email: "alice@prisma.io",
posts: {
create: [
{
title: "Join the Prisma Discord",
content: "https://pris.ly/discord",
published: true,
},
{
title: "Prisma on YouTube",
content: "https://pris.ly/youtube",
},
],
},
},
{
name: "Bob",
email: "bob@prisma.io",
posts: {
create: [
{
title: "Follow Prisma on Twitter",
content: "https://www.twitter.com/prisma",
published: true,
},
],
},
},
];
export async function main() {
for (const u of userData) {
await prisma.user.create({ data: u });
}
}
main();
現在，透過更新您的 prisma.config.ts 來告訴 Prisma 如何執行此指令碼
import 'dotenv/config'
import { defineConfig, env } from 'prisma/config';
export default defineConfig({
schema: 'prisma/schema.prisma',
migrations: {
path: 'prisma/migrations',
seed: `tsx prisma/seed.ts`,
},
datasource: {
url: env('DATABASE_URL'),
},
});
執行種子指令碼
npx prisma db seed
並開啟 Prisma Studio 來檢視您的資料
npx prisma studio
3. 將 Prisma 整合至 SvelteKit
3.1. 建立 Prisma Client
在您的 /src/lib 目錄中，將 index.ts 重新命名為 prisma.ts。此檔案將用於建立並匯出您的 Prisma Client 實例。
src/lib 中的檔案可以使用 $lib 別名在任何地方存取。
DATABASE_URL 儲存在 .env 檔案中。若要存取它，您需要從 $env/static/private 命名空間進行匯入。
按如下方式設定 Prisma client：
import { PrismaClient } from '../generated/prisma/client.js';
import { DATABASE_URL } from '$env/static/private';
import { PrismaPg } from '@prisma/adapter-pg';
const adapter = new PrismaPg({
connectionString: DATABASE_URL,
});
const prisma = new PrismaClient({
adapter,
});
export default prisma;
我們建議使用連線池（例如 Prisma Accelerate）來有效率地管理資料庫連線。
如果您選擇不使用，請避免在長效執行環境中全域實例化 PrismaClient。請改為在每個請求中建立並銷毀客戶端，以防止資料庫連線耗盡。
3.2. 建立伺服器路由
若要在伺服器端從資料庫獲取資料，請在您的 routes 目錄中建立 +page.server.ts 檔案。此檔案應匯出一個 load 函式，該函式會在頁面渲染前於伺服器執行。
在基本的 load 函式中使用 findMany() 方法來取得使用者列表。
按如下方式更新您的 +page.server.ts 檔案：
import prisma from '$lib/prisma';
export async function load() {
const users = await prisma.user.findMany({});
return {
users
};
}
此時，您僅直接取得 User 模型上的資料——尚未包含貼文等關聯。
若要同時獲取每個使用者的貼文，我們可以使用 include 選項來擴展查詢。這會告訴 Prisma 在結果中加入關聯的 Posts 資料表。
按如下方式更新您的 findMany() 呼叫：
import prisma from '$lib/prisma';
export async function load() {
const users = await prisma.user.findMany({
include: {
posts: true
}
});
return {
users
};
}
現在，結果中的每一位使用者都會包含一個 posts 陣列。
3.3. 填充頁面
在 src/routes/+page.svelte 中，將檔案精簡為基礎內容並加入一個 <script> 片段。檔案應如下所示：
<script lang="ts">
</script>
<h1>SvelteKit + Prisma</h1>
我們需要取得從 +page.server.ts 匯出的資料。
<script lang="ts">
let { data } = $props();
</script>
<h1>SvelteKit + Prisma</h1>
現在我們有了資料，讓我們使用 Svelte 的 each 區塊來遍歷使用者及其貼文。
<script lang="ts">
let { data } = $props();
</script>
<h1>SvelteKit + Prisma</h1>
{#each data.users as user}
<h2>{user.name}</h2>
{#each user.posts as post}
<ul>
<li><a href={post.content}>{post.title}</a></li>
</ul>
{/each}
{/each}
完成！您剛剛建立了一個搭配 Prisma ORM 的 SvelteKit 應用程式。以下是一些可供探索的後續步驟，以及更多協助您開始擴充專案的資源。
後續步驟
現在您已經擁有了一個連接到 Prisma Postgres 資料庫且運作正常的 SvelteKit 應用程式，您可以：
- 使用更多模型與關係來擴充您的 Prisma schema
- 加入建立/更新/刪除 (CRUD) 的路由與表單
- 探索驗證與身份驗證
- 啟用 Prisma Postgres 的查詢快取以獲得更好的效能
更多資訊
與 Prisma 保持聯繫
透過以下方式與我們聯繫，繼續您的 Prisma 旅程： 我們的活躍社群。保持資訊靈通、參與其中，並與其他開發者合作
- 在 X 上關注我們 以獲取公告、現場活動和實用技巧。
- 加入我們的 Discord 提出問題、與社群對話，並透過對話獲得積極支援。
- 在 YouTube 上訂閱 查看教學、演示和直播。
- 在 GitHub 上交流 透過為存放庫加星標、報告問題或為 issue 做出貢獻。