跳至主要内容

如何在 SolidStart 中使用 Prisma ORM

10 分钟

简介​

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

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

先决条件​

开始之前，请确保您已安装以下内容

  • 已安装 Node.js 18+ 版本

步骤 1：设置 SolidStart 项目​

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

npm init solid@latest
信息

出现提示时使用以下选项

  • 项目名称：my-solid-prisma-app （或您喜欢的任何名称）
  • 这是一个 SolidStart 项目吗：是
  • 模板：bare
  • 使用 TypeScript：是

接下来，进入您的新项目，安装依赖项，并启动开发服务器

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

开发服务器运行后，在浏览器中打开 http://localhost:3000。您应该会看到 SolidStart 的欢迎界面。

通过编辑 app.tsx 文件并替换头部来清理默认 UI

src/app.tsx
import { createSignal } from "solid-js";
import "./app.css";

export default function App() {
  const [count, setCount] = createSignal(0);

  return (
    <main>
      <h1>SolidStart + Prisma</h1>
      <h1>Hello world!</h1>
      <button class="increment" onClick={() => setCount(count() + 1)} type="button">
        Clicks: {count()}
      </button>
      <p>
        Visit{" "}
        <a href="https://start.solidjs.com" target="_blank">
          start.solidjs.com
        </a>{" "}
        to learn how to build SolidStart apps.
      </p>
    </main>
  );
}

您的 app.tsx 文件现在应该如下所示

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

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

步骤 2：安装并初始化 Prisma​

要开始使用 Prisma，您需要安装一些依赖项

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

如果您未使用 Prisma Postgres 数据库，可以跳过 @prisma/extension-accelerate。

安装完成后，在您的项目中初始化 Prisma

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

这将创建

  • 一个 prisma/ 目录，其中包含 schema.prisma 文件
  • 一个已设置 DATABASE_URL 的 .env 文件

步骤 2.1：定义您的 Prisma Schema​

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

prisma/schema.prisma
generator client {
  provider = "prisma-client"
  provider = "prisma-client-js"
  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，它们之间存在一对多关系。

现在，运行以下命令创建数据库表并生成 Prisma Client

npx prisma migrate dev --name init

步骤 2.2：填充数据库数据​

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

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

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

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
"prisma": {
  "seed": "tsx prisma/seed.ts"
}

运行填充脚本

npx prisma db seed

并打开 Prisma Studio 检查您的数据

npx prisma studio

步骤 3：在您的应用中使用 Prisma Client​

步骤 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";
import { withAccelerate } from "@prisma/extension-accelerate";

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

export default prisma;
信息

如果您未使用 Prisma Postgres，请移除 .$extends(withAccelerate())。

步骤 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" },
  });
}

步骤 4：在您的组件中获取数据​

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

src/app.tsx
import "./app.css";
import { createResource } from "solid-js";
import { User, Post } from "@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 钩子。它会自动跟踪加载和错误状态。 了解更多。

步骤 5：显示数据​

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

src/app.tsx
import "./app.css";
import { createResource, For } from "solid-js";
import { User, Post } from "@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()。 了解更多

步骤 6：添加加载和错误状态​

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

src/app.tsx
import "./app.css";
import { createResource, For, Show } from "solid-js";
import { User, Post } from "@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 语句。 了解更多

下一步​

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

  • 使用更多模型和关系扩展您的 Prisma schema
  • 添加创建/更新/删除路由和表单
  • 探索认证、验证和乐观更新

更多信息​


与 Prisma 保持联系

通过连接到以下方式继续您的 Prisma 之旅 我们的活跃社区。随时了解情况，积极参与，并与其他开发者协作

我们衷心重视您的参与，并期待您成为我们社区的一员！