07.08.2024 в 18:45

Руководство по интеграции Prisma React

Если вы разработчик React и устали от сложных манипуляций с базами данных, Prisma — это именно то, что вам нужно! Prisma React — это мощный инструмент, который выступает в роли ORM (объектно-реляционного отображения), делая взаимодействие с базами данных проще простого. Он отлично работает с популярными базами данных, такими как PostgreSQL, MySQL и SQLite.

В этом руководстве мы расскажем, почему стоит интегрировать Prisma в свой React-проект, подробно рассмотрим настройки и изучим самые полезные функции Prisma React.

Почему Prisma — идеальный выбор для ваших React-проектов?

React часто используется в связке с REST API или GraphQL для управления данными. Но когда дело доходит до работы со сложными взаимосвязями данных и требованием к строгой типизации, вам приходится писать много рутинного кода. Именно здесь на помощь приходит Prisma!

Вот почему Prisma отлично подходит для ваших React-проектов:

Безопасность ввода данных: Prisma автоматически генерирует типы TypeScript на основе вашей схемы базы данных, что значительно снижает вероятность ошибок во время выполнения.
Повышение производительности: Интуитивно понятный API запросов Prisma упрощает выполнение операций CRUD (создание, чтение, обновление, удаление) без необходимости писать SQL-запросы вручную.
Независимость от конкретных баз данных: Prisma поддерживает множество популярных баз данных, предоставляя вам свободу выбора той, которая лучше всего подходит для ваших нужд.
Встроенная миграция: Prisma предоставляет инструменты для эффективного управления изменениями схемы базы данных, что позволяет вам безболезненно обновлять свой проект.

Теперь, когда вы понимаете «почему?», давайте перейдем к вопросу «как?».

Настройка Prisma в проекте React

Настроить новый проект с использованием Prisma React совсем несложно. Давайте разберемся с основными шагами:

Шаг 1: Создаем новый React-проект

Используйте инструмент create-react-app для быстрого создания нового React-проекта:

npx create-react-app my-prisma-app
cd my-prisma-app

Шаг 2: Добавляем бэкенд (например, Express.js)

Prisma обычно интегрируется с бэкендом, поэтому создадим простой сервер с использованием Express.js:

npm install express

Создайте файл index.js в каталоге server и добавьте следующий код:

const express = require('express');
const app = express();
const port = 3001;


app.get('/', (req, res) => {
  res.send('Hello World!');
});


app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

Шаг 3: Устанавливаем Prisma

Устанавливаем Prisma и инициализируем ее в вашем проекте:

npm install prisma --save-dev
npx prisma init

Шаг 4: Настраиваем схему базы данных

В файле prisma/schema.prisma определите свою модель данных:

model User {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
  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, где пользователь может иметь несколько записей (постов).

Шаг 5: Запускаем миграции

Запускаем следующую команду, чтобы создать таблицы базы данных на основе нашей схемы:

npx prisma migrate dev --name init

Шаг 6: Создаем Prisma Client

Чтобы использовать Prisma в вашем бэкенде, необходимо создать Prisma Client:

npx prisma generate

Шаг 7: Интегрируем Prisma с Express

Теперь вы можете использовать Prisma в своих маршрутах Express для выполнения операций с базой данных:

const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();


app.get('/users', async (req, res) => {
  const users = await prisma.user.findMany();
  res.json(users);
});

Преимущества Prisma: Типобезопасность, Мощные Запросы и Безопасность

1. Типобезопасные запросы

Одна из ключевых особенностей Prisma, которая делает ее привлекательной для разработчиков, - это ее типобезопасные запросы. Когда вы определяете свою схему в schema.prisma, Prisma автоматически генерирует типы TypeScript, которые вы можете использовать в своем приложении. Это обеспечивает полную синхронизацию между вашими запросами к базе данных и схемой, минимизируя вероятность ошибок во время выполнения.

const users = await prisma.user.findMany({
  where: {
    email: {
      endsWith: '@example.com',
    },
  },
});

2. Расширенный поиск запросов

Prisma поддерживает сложные запросы прямо из коробки. Например, вы можете выполнять вложенную запись в одном запросе:

const newUser = await prisma.user.create({
  data: {
    name: 'John Doe',
    email: 'john@example.com',
    posts: {
      create: [
        { title: 'First Post', content: 'Hello World' },
        { title: 'Second Post', content: 'Prisma is awesome!' },
      ],
    },
  },
});

3. Разбиение на страницы

Разбиение на страницы — стандартная практика в веб-приложениях, и Prisma делает ее простой с помощью функций skip и take:

const paginatedUsers = await prisma.user.findMany({
  skip: 0,
  take: 10,
});

4. Фильтрация и сортировка

Prisma позволяет легко фильтровать и сортировать данные:

const sortedUsers = await prisma.user.findMany({
  orderBy: {
    name: 'asc',
  },
  where: {
    posts: {
      some: {
        published: true,
      },
    },
  },
});

5. Проверка данных и ограничения

Prisma дает возможность задавать ограничения на уровне базы данных, такие как уникальные поля, а также проверяет типы данных, гарантируя целостность вашей базы данных.

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
}

Prisma не только облегчает взаимодействие с базами данных, но и обеспечивает типобезопасность, гибкость в запросах и гарантирует целостность данных. Она идеально подходит для создания robustных и надежных веб-приложений с помощью React.

Prisma и React: расширяя возможности вашего приложения

1. Данные в реальном времени: создаем динамичные приложения

Данные в реальном времени — это ключ к успеху чатов, информационных панелей и инструментов для совместной работы. Prisma легко интегрируется с WebSockets или библиотеками вроде Apollo для подписок на GraphQL, позволяя вам отправлять обновления в интерфейс React.

Давайте настроим функцию реального времени. Сначала установим необходимые зависимости:

npm install @apollo/client graphql subscriptions-transport-ws

Затем настроим простую подписку в своем приложении React:

import { useSubscription, gql } from '@apollo/client';


const POST_SUBSCRIPTION = gql`
  subscription {
    post(where: { mutation_in: [CREATED] }) {
      node {
        id
        title
        content
      }
    }
  }
`;


function PostList() {
  const { data, loading } = useSubscription(POST_SUBSCRIPTION);


  if (loading) return <p>Loading...</p>;


  return (
    <ul>
      {data.post.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Эта настройка позволяет вашему приложению React получать обновления в режиме реального времени при создании новой публикации.

2. Оптимизация запросов к базе данных

Prisma уже оптимизирована для эффективной работы с базой данных, но вы можете сделать еще больше!

Пакетные запросы: объединяйте несколько запросов в один, чтобы сократить количество обращений к базе данных.
Отложенная загрузка: загружайте данные только тогда, когда они нужны, чтобы минимизировать время загрузки приложения.

Пример пакетных запросов:

const users = await prisma.user.findMany({
  include: { posts: true },
});

Такой подход позволяет получить пользователей и их записи в одном запросе, что сокращает количество обращений к базе данных и повышает эффективность работы приложения.

3. Работа со сложными связями

Prisma умело справляется со сложными взаимосвязями между данными, предоставляя простой и понятный синтаксис.

Пример: Вложенные записи

Давайте создадим профиль пользователя с несколькими публикациями за одну операцию:

const newUser = await prisma.user.create({
  data: {
    name: 'Alice',
    email: 'alice@example.com',
    profile: {
      create: {
        bio: 'Software Engineer',
      },
    },
    posts: {
      create: [
        { title: 'First Post', content: 'Hello World!' },
        { title: 'Second Post', content: 'Prisma is powerful.' },
      ],
    },
  },
});

4. Промежуточное программное обеспечение Prisma: расширяем функциональность

Prisma позволяет создавать промежуточное ПО, которое выполняется до или после запросов к базе данных. Это удобно для ведения журнала, проверки подлинности или модификации запросов.

Пример: Промежуточное программное обеспечение для ведения журнала

prisma.$use(async (params, next) => {
  console.log(`Query ${params.model}.${params.action} executed`);
  return next(params);
});

Это промежуточное программное обеспечение регистрирует каждый запрос, выполняемый с помощью Prisma, помогая вам отслеживать и отлаживать ваше приложение.

5. Развертывание приложения Prisma React

Развертывание вашего приложения Prisma React требует правильной настройки как интерфейсной, так и серверной части. Используйте сервисы вроде Vercel для React и облачные провайдеры (AWS, DigitalOcean) для серверной части. Убедитесь, что ваша схема Prisma правильно настроена для рабочей среды и используйте переменные среды для подключения к базе данных.

Реальное применение Prisma: примеры из жизни

Пример 1: Электронная коммерция

Представьте себе интернет-магазин. В нем есть товары, категории и заказы. Товар может относиться к нескольким категориям, а заказ может включать несколько товаров. Управлять такими связями бывает сложно, но Prisma делает это проще.

model Product {
  id        Int       @id @default(autoincrement())
  name      String
  price     Float
  categories Category[] @relation(references: [id])
}


model Category {
  id       Int       @id @default(autoincrement())
  name     String
  products Product[]
}


model Order {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  products  Product[]
}

С Prisma запрос всех товаров определенной категории или всех заказов, содержащих определенный товар, становится простым:

const productsInCategory = await prisma.category.findUnique({
  where: { id: categoryId },
  include: { products: true },
});


const ordersWithProduct = await prisma.order.findMany({
  where: { products: { some: { id: productId } } },
});

Пример 2: Чат-приложение

Представьте, что у вас есть чат, где нужно сообщать пользователям о новых сообщениях в реальном времени. Prisma помогает управлять потоком данных, чтобы обновления в базе данных сразу же отображались в интерфейсе.

import { PubSub } from 'graphql-subscriptions';


const pubsub = new PubSub();


const MESSAGE_SUBSCRIPTION = gql`
  subscription {
    message(where: { mutation_in: [CREATED] }) {
      node {
        id
        content
        sender {
          name
        }
      }
    }
  }
`;


function ChatRoom() {
  const { data, loading } = useSubscription(MESSAGE_SUBSCRIPTION);


  if (loading) return <p>Loading...</p>;


  return (
    <ul>
      {data.message.map(msg => (
        <li key={msg.id}>
          {msg.sender.name}: {msg.content}
        </li>
      ))}
    </ul>
  );
}

В режиме реального времени с помощью Prisma упрощается управление потоками данных и отображаются обновления базы данных на интерфейсе.

Пример 3. Аутентификация пользователя

При авторизации важно безопасно получать информацию о пользователе и проверять его данные. Prisma помогает запрашивать только необходимые данные, чтобы не раскрывать личную информацию.

const user = await prisma.user.findUnique({
  where: { email: userEmail },
  select: { id: true, passwordHash: true }, // Only select necessary fields
});

Это снижает риск случайного доступа к другой пользовательской информации.

Пример 4. Массовый импорт данных

Представьте, что вам нужно добавить в базу данных тысячи новых записей. Пакетные операции Prisma делают это просто и быстро. Это намного эффективнее, чем вводить каждого пользователя по отдельности, и обеспечивает более высокую производительность.

const bulkUsers = await prisma.user.createMany({
  data: [
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Bob', email: 'bob@example.com' },
    // ...other users
  ],
});

Это намного эффективнее, чем вводить каждого пользователя по отдельности, и обеспечивает более высокую производительность и упрощает обработку ошибок.

Пример 5. Добавление новой функции

Ваше приложение растет, и схема базы данных нуждается в изменениях. Инструменты миграции Prisma помогают легко внедрять и отменять изменения. Например, вам нужно добавить новую таблицу Profile для пользователей. С помощью prisma migrate dev вы создаете таблицу и обновляете схему базы данных без ручного написания SQL-кода.

model Profile {
  id     Int    @id @default(autoincrement())
  bio    String?
  userId Int    @unique
  user   User   @relation(fields: [userId], references: [id])
}

Запуск prisma migrate dev позволит создать эту новую таблицу и обновить схему базы данных без использования SQL вручную.

Вывод:

Prisma React предлагает современный подход к управлению базами данных, который легко интегрируется с React. Автоматически генерируемые запросы и мощные функции, такие как расширенная фильтрация, сортировка и разбивка на страницы, делают его незаменимым инструментом для любого разработчика полного цикла. Следуя этому руководству, вы получите прочную основу для создания надежных приложений с помощью Prisma и React.

Для дальнейшего изучения обязательно ознакомьтесь с официальной документацией Prisma React и поэкспериментируйте с доступными расширенными функциями и интеграциями. Приятного программирования!

Источник:

Exit fullscreen mode

#React #Express

Войти на сайт