跳到主要內容

如何在 SolidStart 中使用 Prisma ORM

10 分鐘

簡介​

Prisma ORM 透過型別安全的查詢和流暢的開發體驗簡化了資料庫訪問。SolidStart 是一個用於使用 SolidJS 構建響應式 Web 應用程式的現代框架，它與 Prisma 和 Postgres 結合使用，可以建立清晰且可擴充套件的全棧架構。

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

先決條件​

1. 設定你的專案​

首先建立一個新的 SolidStart 應用程式。在你的終端中執行

npm init solid@latest

在提示時使用以下選項

資訊
  • 專案名稱： my-solid-prisma-app
  • 這是 SolidStart 專案嗎： 是
  • 模板： bare
  • 使用 TypeScript： 是

接下來，進入你的新專案，安裝依賴項，然後啟動開發伺服器

cd my-solid-prisma-app
npm install
npm run dev

開發伺服器執行後，在瀏覽器中開啟 https://:3000。你應該會看到 SolidStart 歡迎介面。

透過編輯 app.tsx 檔案並將其內容替換為以下程式碼來清理預設 UI

src/app.tsx
import "./app.css";

export default function App() {
  return (
    <main>
      <h1>SolidStart + Prisma</h1>
    </main>
  );
}

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 資料庫時，你需要回答幾個問題。選擇離你最近的區域併為你的資料庫取一個令人難忘的名稱，例如“我的 SolidStart 專案”

這將建立

  • 一個包含 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": "prisma-solid",
  "type": "module",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start"
  },
  "prisma": {
    "seed": "tsx prisma/seed.ts"
  }
  "dependencies": {
    "@prisma/client": "^6.5.0",
    "@prisma/extension-accelerate": "^1.3.0",
    "@solidjs/start": "^1.1.0",
    "solid-js": "^1.9.5",
    "vinxi": "^0.5.3"
  },
  "engines": {
    "node": ">=22"
  },
  "devDependencies": {
    "@types/node": "^22.13.11",
    "prisma": "^6.5.0",
    "tsx": "^4.19.3"
  }
}

執行種子指令碼

npx prisma db seed

並開啟 Prisma Studio 檢查你的資料

npx prisma studio

3. 將 Prisma 整合到 SolidStart 中​

3.1. 建立 Prisma Client​

在你的專案根目錄下，建立一個新的 lib 資料夾並在其中建立一個 prisma.ts 檔案

mkdir -p lib && touch lib/prisma.ts

新增以下程式碼來建立一個 Prisma Client 例項

lib/prisma.ts
import { PrismaClient } from "../src/generated/prisma/client.js";
import { withAccelerate } from "@prisma/extension-accelerate";

const prisma = new PrismaClient().$extends(withAccelerate());

export default prisma;
警告

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

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

3.2. 建立 API 路由​

現在，讓我們使用 API 路由從資料庫中獲取資料。

在 src/routes/api/users.ts 建立一個新檔案

src/routes/api/users.ts
import prisma from "../../../lib/prisma";

export async function GET() {
  const users = await prisma.user.findMany({
    include: {
      posts: true,
    },
  });
  return new Response(JSON.stringify(users), {
    headers: { "Content-Type": "application/json" },
  });
}

3.3. 在你的元件中獲取資料​

在你的 app.tsx 檔案中，使用 createResource 從你的新 API 路由獲取資料

src/app.tsx
import "./app.css";
import { createResource } from "solid-js";
import { User, Post } from "./generated/prisma/client";

type UserWithPosts = User & {
  posts: Post[];
};

const fetchUsers = async () => {
  const res = await fetch("https://:3000/api/users");
  return res.json();
};

export default function App() {
  const [users, { mutate, refetch }] = createResource<UserWithPosts[]>(fetchUsers);

  return (
    <main>
      <h1>SolidStart + Prisma</h1>
    </main>
  );
}
資訊

createResource 是 SolidJS 用於管理非同步資料的鉤子。它會自動跟蹤載入和錯誤狀態。瞭解更多。

3.4. 顯示資料​

要顯示使用者及其帖子，請使用 SolidJS 的 <For> 元件

src/app.tsx
import "./app.css";
import { createResource, For } from "solid-js";
import { User, Post } from "./generated/prisma/client";

type UserWithPosts = User & {
  posts: Post[];
};

const fetchUsers = async () => {
  const res = await fetch("https://:3000/api/users");
  return res.json();
};

export default function App() {
  const [users, { mutate, refetch }] =
    createResource<UserWithPosts[]>(fetchUsers);

  return (
    <main>
      <h1>SolidJS + Prisma</h1>
      <For each={users() ?? []}>
        {(user) => (
          <div>
            <h3>{user.name}</h3>
            <For each={user.posts}>{(post) => <p>{post.title}</p>}</For>
          </div>
        )}
      </For>
    </main>
  );
}
資訊

<For> 響應式地遍歷陣列。可以把它看作 React 中的 .map()。瞭解更多

3.5. 新增載入和錯誤狀態​

使用 SolidJS 的 <Show> 元件來處理載入和錯誤情況

src/app.tsx
import "./app.css";
import { createResource, For, Show } from "solid-js";
import { User, Post } from "./generated/prisma/client";

type UserWithPosts = User & {
  posts: Post[];
};

const fetchUsers = async () => {
  const res = await fetch("https://:3000/api/users");
  return res.json();
};

export default function App() {
  const [users, { mutate, refetch }] =
    createResource<UserWithPosts[]>(fetchUsers);

  return (
    <main>
      <h1>SolidJS + Prisma</h1>
      <Show when={!users.loading} fallback={<p>Loading...</p>}>
        <Show when={!users.error} fallback={<p>Error loading data</p>}>
          <For each={users()}>
            {(user) => (
              <div>
                <h3>{user.name}</h3>
                <For each={user.posts}>{(post) => <p>{post.title}</p>}</For>
              </div>
            )}
          </For>
        </Show>
      </Show>
    </main>
  );
}
資訊

<Show> 有條件地渲染內容。它類似於 if 語句。瞭解更多

你完成了！你剛剛建立了一個連線到 Prisma Postgres 資料庫的 SolidStart 應用程式。

下一步​

現在你有一個連線到 Prisma Postgres 資料庫的 SolidStart 應用程式，你可以

  • 使用更多模型和關係擴充套件你的 Prisma Schema
  • 新增建立/更新/刪除路由和表單
  • 探索身份驗證、驗證和樂觀更新
  • 使用 Prisma Postgres 啟用查詢快取以獲得更好的效能

更多資訊​


與 Prisma 保持聯絡

透過以下方式與我們聯絡，繼續你的 Prisma 之旅 我們的活躍社群。保持資訊暢通，參與其中，並與其他開發者協作

我們真誠地重視你的參與，並期待你成為我們社群的一部分！

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