Skip to main content

如何在 SolidStart 中使用 Prisma ORM

10 min

介绍​

¥Introduction

Prisma ORM 通过类型安全的查询和流畅的开发者体验简化了数据库访问。SolidStart 是一个使用 SolidJS 构建响应式 Web 应用的现代框架，它与 Prisma 和 Postgres 完美搭配，可创建简洁且可扩展的全栈架构。

¥Prisma ORM streamlines database access with type-safe queries and a smooth developer experience. SolidStart, a modern framework for building reactive web apps with SolidJS, pairs well with Prisma and Postgres to create a clean and scalable full-stack architecture.

在本指南中，你将学习如何从头开始在 SolidStart 项目中将 Prisma ORM 与 Prisma Postgres 数据库集成。你可以在 GitHub 上找到本指南的完整示例。

¥In this guide, you'll learn how to integrate Prisma ORM with a Prisma Postgres database in a SolidStart project from scratch. You can find a complete example of this guide on GitHub.

先决条件​

¥Prerequisites

1. 设置你的项目​

¥ Set up your project

首先创建一个新的 SolidStart 应用。在终端运行：

¥Begin by creating a new SolidStart app. In your terminal, run:

npm init solid@latest

出现提示时，请使用以下选项：

¥Use the following options when prompted:

信息

  • 项目名称：my-solid-prisma-app

    ¥Project name: my-solid-prisma-app

  • 这是 SolidStart 项目吗？Yes

    ¥Is this a SolidStart project: Yes

  • 模板：bare

    ¥Template: bare

  • 使用 TypeScript：Yes

    ¥Use TypeScript: Yes

接下来，导航到你的新项目，安装依赖，并启动开发服务器：

¥Next, navigate into your new project, install dependencies, and start the development server:

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

开发服务器运行后，请在浏览器中打开 http://localhost:3000。你应该看到 SolidStart 欢迎屏幕。

¥Once the dev server is running, open http://localhost:3000 in your browser. You should see the SolidStart welcome screen.

通过编辑 app.tsx 文件并将其内容替换为以下代码来清理默认 UI：

¥Clean up the default UI by editing the app.tsx file and replacing its content with the following code:

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

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

2. 安装和配置 Prisma​

¥ Install and Configure Prisma

2.1.安装依赖​

¥2.1. Install dependencies

要开始使用 Prisma，你需要安装一些依赖：

¥To get started with Prisma, you'll need to install a few dependencies:

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

安装完成后，请在你的项目中初始化 Prisma：

¥Once installed, initialize Prisma in your project:

npx prisma init --db --output ../src/generated/prisma
信息

在设置 Prisma Postgres 数据库时，你需要回答几个问题。选择离你最近的区域，并为数据库选择一个容易记住的名称，例如 "我的 SolidStart 项目"

¥You'll need to answer a few questions while setting up your Prisma Postgres database. Select the region closest to your location and a memorable name for your database like "My SolidStart Project"

这将造成：

¥This will create:

  • 一个包含 schema.prisma 文件的 prisma 目录。

    ¥A prisma directory with a schema.prisma file.

  • 一个 Prisma Postgres 数据库。

    ¥A Prisma Postgres database.

  • 一个位于项目根目录、包含 DATABASE_URL 文件的 .env 文件。

    ¥A .env file containing the DATABASE_URL at the project root.

  • 用于生成的 Prisma 客户端的 output 目录，用作 src/generated/prisma。

    ¥An output directory for the generated Prisma Client as src/generated/prisma.

2.2.定义 Prisma Schema​

¥2.2. Define your Prisma Schema

在 prisma/schema.prisma 文件中，添加以下模型，并将生成器更改为使用 prisma-client 提供程序：

¥In the prisma/schema.prisma file, add the following models and change the generator to use the prisma-client provider:

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，它们之间存在一对多关系。

¥This creates two models: User and Post, with a one-to-many relationship between them.

2.3.配置 Prisma 客户端生成器​

¥2.3. Configure the Prisma Client generator

现在，运行以下命令创建数据库表并生成 Prisma 客户端：

¥Now, run the following command to create the database tables and generate the Prisma Client:

npx prisma migrate dev --name init

2.4.种子数据库​

¥2.4. Seed the database

让我们添加一些种子数据，以便用示例用户和帖子填充数据库。

¥Let's add some seed data to populate the database with sample users and posts.

在 prisma/ 目录中创建一个名为 seed.ts 的新文件：

¥Create a new file called seed.ts in the prisma/ directory:

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 如何运行此脚本：

¥Now, tell Prisma how to run this script by updating your package.json:

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"
  }
}

运行种子脚本：

¥Run the seed script:

npx prisma db seed

打开 Prisma Studio 检查你的数据：

¥And open Prisma Studio to inspect your data:

npx prisma studio

3. 将 Prisma 集成到 SolidStart​

¥ Integrate Prisma into SolidStart

3.1.创建 Prisma 客户端​

¥3.1. Create a Prisma Client

在项目根目录下，创建一个新的 lib 文件夹，并在其中添加一个 prisma.ts 文件：

¥At the root of your project, create a new lib folder and a prisma.ts file inside it:

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

添加以下代码以创建 Prisma 客户端实例：

¥Add the following code to create a Prisma Client instance:

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 加速）来高效管理数据库连接。

¥We recommend using a connection pooler (like Prisma Accelerate) to manage database connections efficiently.

如果你选择不使用 PrismaClient，请避免在长期存在的环境中全局实例化 PrismaClient。请改为按请求创建并释放客户端，以防止耗尽数据库连接。

¥If you choose not to use one, avoid instantiating PrismaClient globally in long-lived environments. Instead, create and dispose of the client per request to prevent exhausting your database connections.

3.2.创建 API 路由​

¥3.2. Create an API Route

现在，让我们使用 API 路由从数据库获取数据。

¥Now, let's fetch data from the database using an API route.

在 src/routes/api/users.ts 目录下创建一个新文件：

¥Create a new file at 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.在你的组件中获取数据​

¥3.3. Fetch Data in Your Component

在你的 app.tsx 文件中，使用 createResource 从新的 API 路由获取数据：

¥In your app.tsx file, use createResource to fetch data from your new API route:

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("http://localhost: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 钩子。它自动跟踪加载和错误状态。了解更多。

¥createResource is a SolidJS hook for managing async data. It tracks loading and error states automatically. Learn more.

3.4.显示数据​

¥3.4. Display the Data

要显示用户及其帖子，请使用 SolidJS 的 <For> 组件：

¥To show the users and their posts, use SolidJS's <For> component:

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("http://localhost: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()。了解更多

¥<For> loops through an array reactively. Think of it like .map() in React. Learn more

3.5.添加加载和错误状态​

¥3.5. Add Loading and Error States

使用 SolidJS 的 <Show> 组件处理加载和错误情况：

¥Use SolidJS's <Show> component to handle loading and error conditions:

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("http://localhost: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 语句。了解更多

¥<Show> conditionally renders content. It's similar to an if statement. Learn more

你已完成！你刚刚创建了一个连接到 Prisma Postgres 数据库的 SolidStart 应用。

¥You're done! You've just created a SolidStart app connected to a Prisma Postgres database.

后续步骤​

¥Next Steps

现在你已经拥有一个连接到 Prisma Postgres 数据库的 SolidStart 应用，你可以：

¥Now that you have a working SolidStart app connected to a Prisma Postgres database, you can:

  • 使用更多模型和关系扩展你的 Prisma 模式

    ¥Extend your Prisma schema with more models and relationships

  • 添加创建/更新/删除路由和表单

    ¥Add create/update/delete routes and forms

  • 探索身份验证、验证和乐观更新

    ¥Explore authentication, validation, and optimistic updates

  • 使用 Prisma Postgres 启用查询缓存以获得更好的性能

    ¥Enable query caching with Prisma Postgres for better performance

更多信息​

¥More Info


Stay connected with Prisma

Continue your Prisma journey by connecting with our active community. Stay informed, get involved, and collaborate with other developers:

We genuinely value your involvement and look forward to having you as part of our community!