Prisma

Prisma 允许以完全类型安全的方式与 MongoDB 或 SQL 数据库进行交互。

使用 Prisma，您可以在 .prisma 文件中定义数据库模式，其 CLI 会自动生成数据库迁移和 Typescript 类型。

Prisma 可以与 Qwik 一起使用 routeLoader$、routeAction$ 和 server$ 函数。这些是 Qwik 的 API，用于仅在服务器端执行代码。

将 Prisma 添加到 Qwik 的最简单方法是使用 pnpm qwik add prisma 命令。这将安装所需的依赖项，并创建一个包含 Prisma 模式和迁移的 prisma 文件夹。

npm run qwik add prisma

Prisma 可以轻松使用不同的数据库，如 Postgres、MySQL、SQLite 和 MongoDB。

列出所有用户

我们将使用 routeLoader$ 查询数据库中的所有用户，使用 prisma.user.findMany()，并返回结果。

src/routes/users/index.tsx

import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import { PrismaClient } from '@prisma/client'
 
export const useGetUsers = routeLoader$(async () => {
  const prisma = new PrismaClient();
  // 从 SQLite 中读取示例
  const users = await prisma.user.findMany()
  return users;
});
 
export default component$(() => {
  const users = useGetUsers();
  return (
    <section>
      <h1>用户目录</h1>
      <ul>
        {users.value.map(user => (
          <li key={user.id}>
            <a href={`/users/${user.id}`}>{user.name} ({user.email})</a>
          </li>
        ))}
      </ul>
    </section>
  )
});

显示用户详细信息

我们将使用 routeLoader$ 根据 userId URL 参数查询特定用户，使用 prisma.user.findUnique()，并返回结果。

src/routes/users/[userId]/index.tsx

import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import { PrismaClient } from '@prisma/client'
 
export const useGetUser = routeLoader$(async ({params, status}) => {
  const userId = parseInt(params['userId'], 10);
  const prisma = new PrismaClient();
  const user = await prisma.user.findUnique({where: {id: userId}});
  if (!user) {
    // 如果找不到用户，则将状态设置为 404
    status(404);
  }
  return user;
});
 
export default component$(() => {
  const user = useGetUser();
  return (
    <section>
      <h1>用户详细信息</h1>
      {user.value ? (
        <>
          <p>姓名：{user.value.name}</p>
          <p>邮箱：{user.value.email}</p>
        </>
      ) : (
        <p>用户未找到</p>
      )}
    </section>
  )
});

添加用户

我们将使用 routeAction$ 和 Form 创建一个渐进式表单，以将新用户添加到数据库。我们将使用 prisma.user.create() 创建用户。

src/routes/create/index.tsx

import { component$ } from '@builder.io/qwik';
import { routeAction$, zod$, z, Form } from '@builder.io/qwik-city';
import { PrismaClient } from '@prisma/client'
 
export const useCreateUser = routeAction$(async (data) => {
  const prisma = new PrismaClient();
  const user = await prisma.user.create({
    data,
  });
  return user;
}, zod$({
  name: z.string(),
  email: z.string().email(),
}));
 
export default component$(() => {
  const createUserAction = useCreateUser();
  return (
    <section>
      <h1>创建用户</h1>
      <Form action={createUserAction}>
        <label>姓名
          <input name="name" value={createUserAction.formData?.get('name')} />
        </label>
        <label>邮箱
          <input name="email" value={createUserAction.formData?.get('email')} />
        </label>
        <button type="submit">创建</button>
      </Form>
      {createUserAction.value && (
        <div>
          <h2>用户创建成功！</h2>
        </div>
      )}
    </section>
  )
});

Contributors

Thanks to all the contributors who have helped make this documentation better!