跳到主要內容

如何在 SvelteKit 中使用 Prisma ORM

15 分鐘

簡介​

Prisma ORM 透過型別安全的查詢簡化了資料庫訪問，當與 SvelteKit 結合使用時，它能構建出強大且可擴充套件的全棧架構。

在本指南中，您將從零開始學習如何在 SvelteKit 專案中整合 Prisma ORM 和 Prisma Postgres 資料庫。您可以在 GitHub 上找到本指南的完整示例。

先決條件​

1. 設定您的專案​

您將使用 Svelte CLI 而不是 npx create svelte@latest。此 CLI 提供更具互動性的設定，並內建支援 ESLint 和 Prettier 等常用工具。

建立一個新的 Svelte 專案

npx sv create sveltekit-prisma

它會提示您自定義設定。以下是您將選擇的選項

資訊
  • 您想要哪個模板？ SvelteKit minimal
  • 新增 TypeScript 型別檢查嗎？ 是，使用 TypeScript 語法
  • 您想為專案新增什麼？
    • prettier
    • eslint
  • 您想使用哪個包管理器安裝依賴？ npm

設定完成後，進入您的專案並啟動開發伺服器

cd sveltekit-prisma
npm run dev

就是這樣！Svelte 讓啟動和執行變得非常簡單。此時，您的專案已準備好整合 Prisma 並連線到 Prisma Postgres 資料庫。

2. 安裝和配置 Prisma​

2.1. 安裝依賴​

要開始使用 Prisma，您需要安裝一些依賴

npm install prisma tsx --save-dev
npm install @prisma/extension-accelerate @prisma/client

安裝完成後，在您的專案中初始化 Prisma

npx prisma init --db --output src/generated/prisma
資訊

在設定 Prisma Postgres 資料庫時，您需要回答幾個問題。選擇離您最近的區域，併為您的資料庫選擇一個易記的名稱，例如“我的 SvelteKit 專案”

這將建立

  • 一個包含 schema.prisma 檔案的 prisma 目錄。
  • 一個 Prisma Postgres 資料庫。
  • 專案根目錄中包含 DATABASE_URL 的 .env 檔案。
  • 用於生成 Prisma Client 的 output 目錄，路徑為 src/generated/prisma。

2.2. 定義您的 Prisma Schema​

在 prisma/schema.prisma 檔案中，新增以下模型並更改生成器以使用 prisma-client 提供程式

prisma/schema.prisma
generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

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 Client 生成器​

現在，執行以下命令以建立資料庫表並生成 Prisma Client

npx prisma migrate dev --name init

2.4. 填充資料庫​

新增一些種子資料，以樣本使用者和帖子填充資料庫。

在 prisma/ 目錄中建立一個名為 seed.ts 的新檔案

prisma/seed.ts
import { PrismaClient, Prisma } from "../src/generated/prisma/client.js";

const prisma = new PrismaClient();

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();

現在，透過更新您的 package.json 檔案來告訴 Prisma 如何執行此指令碼

package.json
{
	"name": "sveltekit-prisma",
	"private": true,
	"version": "0.0.1",
	"type": "module",
	"scripts": {
    // ...
	},
  "prisma": {
    "seed": "tsx prisma/seed.ts"
  }
	"devDependencies": {
    // ...
	},
	"dependencies": {
    // ...
	}
}

執行種子指令碼

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 客戶端

src/lib/prisma.ts
import { PrismaClient } from '../generated/prisma/client.js';
import { DATABASE_URL } from '$env/static/private';
import { withAccelerate } from '@prisma/extension-accelerate';

const prisma = new PrismaClient({
	datasourceUrl: DATABASE_URL
}).$extends(withAccelerate());

export default prisma;

警告

我們建議使用連線池（例如 Prisma Accelerate）來高效管理資料庫連線。

如果您選擇不使用連線池，請**避免**在長期執行的環境中全域性例項化 PrismaClient。相反，請為每個請求建立和銷燬客戶端，以防止耗盡資料庫連線。

3.2. 建立伺服器路由​

要在伺服器端從資料庫獲取資料，請在 routes 目錄中建立 +page.server.ts 檔案。此檔案應匯出一個 load 函式，該函式在頁面渲染之前在伺服器上執行。

在基本的 load 函式中使用 findMany() 方法獲取使用者列表。

像這樣更新您的 +page.server.ts 檔案

src/routes/+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() 呼叫

src/routes/+page.server.ts
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> 片段。檔案應如下所示

src/routes/+page.svelte
<script lang="ts">
</script>

<h1>SvelteKit + Prisma</h1>

我們需要獲取從 +page.server.ts 匯出的資料

src/routes/+page.svelte
<script lang="ts">
	let { data } = $props();
</script>

<h1>SvelteKit + Prisma</h1>

現在我們有了資料，讓我們使用 Svelte 的 each 塊來遍歷使用者及其帖子

src/routes/+page.svelte
<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
  • 新增建立/更新/刪除路由和表單
  • 探索身份驗證和驗證
  • 使用 Prisma Postgres 啟用查詢快取以獲得更好的效能

更多資訊​


保持與 Prisma 的聯絡

透過以下方式繼續您的 Prisma 之旅 我們活躍的社群。隨時瞭解最新資訊、參與其中並與其他開發者協作

我們真誠地珍視您的參與，並期待您成為我們社群的一員！

© . This site is unofficial and not affiliated with Prisma Data, Inc.