Prisma

Prisma позволяет взаимодействовать с MongoDB или SQL базами данных полностью типобезопасным образом.

В Prisma вы определяете схему БД в файлах .prisma, а CLI автоматически генерирует из них миграции БД, а также типы Typescript.

Prisma можно использовать в Qwik с функциями routeLoader$, routeAction$ и server$. Это API Qwik, позволяющие выполнять код только на стороне сервера.

Самый простой способ добавить 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$ для получения конкретных пользователей на основе URL-параметра userId, используя 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>Email-адрес: {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>Email-адрес
          <input name="email" value={createUserAction.formData?.get('email')} />
        </label>
        <button type="submit">Создать</button>
      </Form>
      {createUserAction.value && (
        <div>
          <h2>Пользователь успешно создан!</h2>
        </div>
      )}
    </section>
  )
});

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!