如何在 Astro 中使用 Prisma ORM
簡介
本頁面解答的問題
- 如何將 Prisma 整合到 Astro 中？
- 如何在 Astro 中設定 Prisma Postgres？
- 如何在 Astro 頁面中查詢資料？
Prisma ORM 提供型別安全的資料庫存取，而 Astro 專為效能而生。搭配 Prisma Postgres，您可以獲得一個快速、以內容為先的技術堆疊，實現零冷啟動並具備端到端的極致速度。
在本指南中，您將學習如何從零開始將 Prisma ORM 與 Prisma Postgres 資料庫整合到 Astro 專案中。您可以在 GitHub 上找到本指南的完整範例。
先決條件
1. 設定您的專案
建立一個新的 Astro 專案
npx create-astro@latest
- 我們應該在哪裡建立您的新專案？
astro-prisma - 您想如何開始您的新專案？
使用 minimal（空白）模板 - 安裝依賴項目？ (推薦)
Yes - 初始化一個新的 git 儲存庫？（選用）
是
進入新建立的專案目錄
cd astro-prisma
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 ../prisma/generated
在設定 Prisma Postgres 資料庫時，您需要回答幾個問題。請選擇離您最近的區域，並為資料庫取一個容易記住的名字，例如「My Astro Project」。
這將建立：
- 一個包含
schema.prisma檔案的prisma/目錄 - 一個用於設定 Prisma 的
prisma.config.ts檔案 - 一個已設定好
DATABASE_URL的.env檔案
2.2. 定義您的 Prisma Schema
在 prisma/schema.prisma 檔案中，加入下列模型並將 generator 修改為使用 prisma-client 提供者
generator client {
provider = "prisma-client"
output = "../prisma/generated"
}
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
現在，執行以下指令來建立資料庫表格
npx prisma migrate dev --name init
接著生成 Prisma Client
npx prisma generate
2.5. 進行資料庫植入 (Seed)
讓我們加入一些種子資料，以在資料庫中填充範例使用者與貼文。
在 prisma/ 目錄中建立一個名為 seed.ts 的新檔案
import { PrismaClient, Prisma } from "../prisma/generated/client";
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() {
console.log("Starting to seed...");
for (const u of userData) {
await prisma.user.upsert({
where: { email: u.email },
update: {},
create: u,
});
}
console.log("Seeding finished.");
}
main()
.catch((e) => {
console.error(e);
process.exit(1);
})
.finally(async () => {
await prisma.$disconnect();
});
現在，透過更新您的 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 整合至 Astro
3.1. 建立 TypeScript 環境定義
首先，在您的 src 目錄中建立一個 env.d.ts 檔案，為環境變數提供 TypeScript 定義
interface ImportMetaEnv {
readonly DATABASE_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
3.2. 建立一個 Prisma Client
在 /src 目錄內，建立一個 lib 目錄，並在其中建立一個 prisma.ts 檔案。此檔案將用於建立並匯出您的 Prisma Client 實例。
mkdir src/lib
touch src/lib/prisma.ts
按如下方式設定 Prisma client：
import { PrismaClient } from "../../prisma/generated/client";
import { PrismaPg } from "@prisma/adapter-pg";
const adapter = new PrismaPg({
connectionString: import.meta.env.DATABASE_URL,
});
const prisma = new PrismaClient({
adapter,
});
export default prisma;
我們建議使用連線池（例如 Prisma Accelerate）來有效率地管理資料庫連線。
如果您選擇不使用，請避免在長效執行環境中全域實例化 PrismaClient。請改為在每個請求中建立並銷毀客戶端，以防止資料庫連線耗盡。
3.3. 建立一個 API 路由
在 Astro 應用程式中，API 路由是從資料庫獲取資料的最佳方式。
在 src/pages 目錄中建立一個名為 api/users.ts 的新檔案
mkdir src/pages/api
touch src/pages/api/users.ts
現在，建立一個 GET 路由來從資料庫獲取 Users 資料，並確保透過將 Posts 加入 include 欄位來包含每個使用者的貼文
import type { APIRoute } from "astro";
import prisma from "../../lib/prisma";
export const GET: APIRoute = async () => {
const users = await prisma.user.findMany({
include: { posts: true },
});
return new Response(JSON.stringify(users), {
headers: { "Content-Type": "application/json" },
});
};
3.4. 從 API 路由獲取資料（推薦方法）
Astro 建議直接匯入端點函式，而不是使用 fetch() 進行 HTTP 請求。這種方法更有效率，且能避免 URL 解析問題。
首先建立一個結合 User 和 Post 模型的新型別，稱為 UserWithPosts
---
import type { User, Post } from "../../prisma/generated/client";
import { GET } from "./api/users.ts";
type UserWithPosts = User & { posts: Post[] };
const response = await GET(Astro);
const users: UserWithPosts[] = await response.json();
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro + Prisma</title>
</head>
<body>
<h1>Astro + Prisma</h1>
<ul>
{users.map((user: UserWithPosts) => (
<li>
<h2>{user.name}</h2>
<ul>
{user.posts.map((post: Post) => (
<li>{post.title}</li>
))}
</ul>
</li>
))}
</ul>
</body>
</html>
3.5. 執行您的應用程式
現在啟動您的開發伺服器，查看運作中的 Astro 應用程式
npm run dev
在瀏覽器開啟 https://:4321，即可看到頁面上顯示的使用者及其貼文。
總結
您完成了！您剛剛建立了一個連接到 Prisma Postgres 資料庫的 Astro 應用程式。以下是一些可供探索的後續步驟，以及協助您開始擴充專案的其他資源。
後續步驟
現在您擁有了一個連接到 Prisma Postgres 資料庫的運作中 Astro 應用程式，您可以：
- 使用更多模型與關係來擴充您的 Prisma schema
- 加入建立/更新/刪除 (CRUD) 的路由與表單
- 探索驗證與身份驗證
- 啟用 Prisma Postgres 的查詢快取以獲得更好的效能
更多資訊
與 Prisma 保持聯繫
透過以下方式與我們聯繫，繼續您的 Prisma 旅程： 我們的活躍社群。保持資訊靈通、參與其中，並與其他開發者合作
- 在 X 上關注我們 以獲取公告、現場活動和實用技巧。
- 加入我們的 Discord 提出問題、與社群對話，並透過對話獲得積極支援。
- 在 YouTube 上訂閱 查看教學、演示和直播。
- 在 GitHub 上交流 透過為存放庫加星標、報告問題或為 issue 做出貢獻。