React CRUD с Supabase: пошаговое руководство

Введение

React изменил подход к созданию пользовательских интерфейсов благодаря компонентной архитектуре и декларативному синтаксису. Для большинства приложений важной базовой задачей является реализация операций CRUD: создание, чтение, обновление и удаление данных. В этом руководстве вы научитесь связывать клиент React с Supabase (BaaS) и реализовывать полноценный CRUD‑флоу.

Кратко о терминах:

• Supabase — Backend‑as‑a‑Service (BaaS): набор готовых серверных сервисов (БД, auth, storage, real‑time и т. д.).
• CRUD — набор базовых операций с данными: Create, Read, Update, Delete.

Почему использовать Supabase

Supabase даёт готовую PostgreSQL‑базу, авторизацию, storage и real‑time подписки, доступные через удобный JS SDK. Это ускоряет разработку — особенно полезно при прототипировании и фронтенд‑ориентированных проектах. Однако BaaS не всегда заменяет собственный бэкенд; далее показано, когда он подходит, а когда — нет.

Настройка проекта Supabase

1. Перейдите на сайт Supabase и зарегистрируйтесь.
2. Войдите и откройте страницу дашборда вашего аккаунта.
3. Нажмите кнопку New Project на панели проекта.

4. Заполните параметры проекта и нажмите Create new project.

5. В левом меню выберите SQL Editor.

6. В SQL‑редакторе выполните команду, которая создаст тестовую таблицу products. Эта таблица будет хранить данные для демонстрации:

create table products (
  id bigint generated by default as identity primary key,
  name text,
  description text
);

Важно: в реальном проекте добавьте ограничения, типы и индексы, соответствующие нагрузке и целям проекта.

Настройка React‑проекта и переменные окружения

Создайте React‑приложение (например, через create‑react‑app или Vite). В корне проекта создайте файл .env и добавьте туда значения из раздела Settings → API в вашей панели Supabase: Project URL и Public anon key.

Пример содержимого .env (не коммитить в публичные репозитории):

REACT_APP_SUPABASE_URL=your-project-url
REACT_APP_SUPABASE_ANON_KEY=your-public-anon-key

Установите SDK Supabase:

npm install @supabase/supabase-js

Конфигурация клиента Supabase

В папке src создайте utils/SupabaseClient.js и добавьте код:

import { createClient } from '@supabase/supabase-js';
const supabaseURL = process.env.REACT_APP_SUPABASE_URL;
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseURL, supabaseAnonKey);

Этот файл создаёт экземпляр клиента Supabase и экспортирует его для использования в приложении.

Реализация CRUD в React

Ниже показано пошагово, как реализовать каждую операцию: создание, чтение, обновление и удаление.

1. Создание записи (Create)

В файле src/App.js удалите шаблонный код и добавьте компонент, который использует хук useState и функцию addProduct для вставки записи в таблицу products.

import { useState, useEffect } from 'react';
import ProductCard from './components/ProductCard';
import { supabase } from './utils/SupabaseClient';
import './App.css';

export default function App() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  async function addProduct() {
    try {
      const { data, error } = await supabase
        .from('products')
        .insert({
          name: name,
          description: description
        })
        .single();

      if (error) throw error;
      window.location.reload();
    } catch (error) {
      alert(error.message);
    }
  }

  // далее — чтение, рендер и т. д.
}

Примечание по UX: перезагрузка страницы через window.location.reload() — простое решение для демо. Для продакшена предпочтительнее обновлять локальное состояние (например, добавлять запись в массив products) без перезагрузки.

2. Чтение записей (Read)

Добавьте состояние products и функцию getProducts, которая получает данные из Supabase и обновляет состояние.

  const [products, setProducts] = useState([]);

  async function getProducts() {
    try {
      const { data, error } = await supabase
        .from('products')
        .select('*')
        .limit(10);

      if (error) throw error;

      if (data != null) {
        setProducts(data);
      }
    } catch (error) {
      alert(error.message);
    }
  }

  useEffect(() => {
    getProducts();
  }, []);

Рендер формы и списка продуктов в том же компоненте:

  return (
    <>
      

        

          
Store Products
        
      

      
Add products Data to the Supabase Database

      

        

          Product Name
           setName(e.target.value)}
          />
          Product Description
           setDescription(e.target.value)}
          />
          

           addProduct()}>
            Add Product
          
        
      
      


      
Current Products in the Database

      

        {products.map((product) => (
          

            
          
        ))}
      
    
  );

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

3. Обновление и удаление (Update / Delete)

Создайте компонент src/components/ProductCard.js. Компонент отображает карточку товара, даёт возможность перейти в режим редактирования и выполнить update/delete операции.

import { useState } from 'react';
import { supabase } from '../utils/SupabaseClient';
import './productcard.styles.css';

export default function ProductCard(props) {
  const product = props.product;
  const [editing, setEditing] = useState(false);
  const [name, setName] = useState(product.name);
  const [description, setDescription] = useState(product.description);

  async function updateProduct() {
    try {
      const { data, error } = await supabase
        .from('products')
        .update({
          name: name,
          description: description
        })
        .eq('id', product.id);

      if (error) throw error;
      window.location.reload();
    } catch (error) {
      alert(error.message);
    }
  }

  async function deleteProduct() {
    try {
      const { data, error } = await supabase
        .from('products')
        .delete()
        .eq('id', product.id);
      if (error) throw error;
      window.location.reload();
    } catch (error) {
      alert(error.message);
    }
  }

  return (
    

      

        {editing === false ? (
          

            
{product.name}
            
{product.description}
             deleteProduct()}>Delete Product
             setEditing(true)}>Edit Product
          
        ) : (
          

            
Editing Product
             setEditing(false)}>Go Back
            

            Product Name
             setName(e.target.value)}/>
            Product Description
             setDescription(e.target.value)}/>
            

             updateProduct()}>Update Product in Supabase DB
          
)}
      
    
  );
}

Обратите внимание: для обновления и удаления используются простые запросы с .eq(‘id’, product.id). В продакшн‑приложении стоит обрабатывать ошибки более детально и показывать индикаторы загрузки.

Рекомендации по улучшению UX и архитектуре

• Не перезагружайте страницу после каждого запроса. Предпочитайте актуализацию локального состояния или использование state management (Context, Redux, Zustand).
• Добавьте валидацию форм на клиенте (и на сервере через RLS/триггеры), чтобы предотвратить некорректные данные.
• Для больших наборов данных используйте пагинацию или серверную фильтрацию вместо .limit.
• Реализуйте optimistic UI при редактировании/удалении, чтобы интерфейс был отзывчивее.

Безопасность и приватность

• Не храните секретные ключи (service_role) в клиентском коде. Для операций, требующих привилегий, используйте серверный слой или Edge Functions.
• Настройте Row Level Security (RLS) в Supabase и политики доступа, чтобы ограничить операции только авторизованным пользователям.
• Храните персональные данные с учётом требований GDPR/локального законодательства: минимизируйте хранение PII, обеспечьте возможность удаления данных.

Когда BaaS не подходит (контрпримеры)

• Если нужен сложный бизнес‑логика на сервере, тесно интегрированный с внешними системами. В этом случае лучше собственный бэкенд.
• Когда требуется полный контроль над производительностью и вертикальным масштабированием под высокую нагрузку.
• Если законодательство или политика компании запрещают хранить данные в third‑party сервисах.

Альтернативные подходы

• Firebase Realtime/Firestore — альтернатива с сильной экосистемой и realtime‑функциями.
• Hasura — GraphQL поверх PostgreSQL, хорош для схемно‑ориентированных приложений и сложных запросов.
• Собственный бэкенд (Node.js/Go/Python) с REST/GraphQL, если нужен максимальный контроль.

Мини‑методология: быстрый чеклист развертывания

1. Создать проект в Supabase и таблицу (SQL Editor).
2. Сгенерировать ключи в Settings → API и добавить в .env (не коммитить).
3. Установить @supabase/supabase-js и настроить client в utils.
4. Реализовать CRUD в React, тестировать локально.
5. Настроить RLS и политики на уровне таблиц.
6. Провести нагрузочное тестирование и security review.

Критерии приёмки

• Успешное создание записи через форму и отображение её в списке.
• Обновление данных сохраняет изменения в базе и отображается в UI.
• Удаление записи удаляет её из базы и интерфейса.
• Авторизованные/неавторизованные операции соответствуют RLS‑политикам.
• Нет утечек секретных ключей в репозитории.

Тесты и проверка (Test cases)

• TC1: Создание товара с валидными данными -> запись появляется в списке.
• TC2: Создание товара с пустым именем -> валидация блокирует запрос.
• TC3: Обновление товара -> новые данные видны в UI и в базе.
• TC4: Удаление товара -> запись исчезает и нельзя получить её по id.
• TC5: Попытка выполнить привилегированную операцию без авторизации -> 403 или отказ по политике RLS.

Роли и чеклисты (кто за что отвечает)

• Frontend‑разработчик:
  • Подключение SDK, создание компонентов, валидация форм.
  • UX: индикаторы загрузки и обработка ошибок.
• Backend/DevOps:
  • Настройка RLS/политик, бэкапов PostgreSQL, мониторинг.
• Тестировщик:
  • Написание e2e тестов, проверка политики доступа, security scan.

Модель принятия решений (Flow)

flowchart TD
  A[Нужен быстрый прототип?] -->|Да| B[Использовать Supabase]
  A -->|Нет| C[Оценить требования к безопасности/логике]
  C --> D{Требуется сложная серверная логика?}
  D -->|Да| E[Собственный бэкенд]
  D -->|Нет| B

Глоссарий (одна строка)

• RLS — Row Level Security: политика доступа на уровне строк в PostgreSQL.
• BaaS — Backend as a Service: готовые серверные сервисы, доступные по API.
• Supabase client — JavaScript библиотека для общения с Supabase API.

Советы по миграции и совместимости

• Для миграции с локальной PostgreSQL: используйте pg_dump/pg_restore или инструменты миграции схем.
• При переходе с Firebase к Supabase найдите аналоги функций (auth/user метаданные, storage) и спланируйте миграцию данных.

Короткий пример улучшения: optimistic UI

Вместо перезагрузки окна можно сделать так:

// пример упрощённого optimistic update при добавлении
async function addProductOptimistic(newProduct) {
  // локально показать продукт сразу
  setProducts(prev => [newProduct, ...prev]);
  try {
    const { data, error } = await supabase
      .from('products')
      .insert(newProduct)
      .single();
    if (error) throw error;
    // заменить временный объект на объект с id из БД
    setProducts(prev => prev.map(p => p.tempId === newProduct.tempId ? data : p));
  } catch (e) {
    // откат при ошибке
    setProducts(prev => prev.filter(p => p.tempId !== newProduct.tempId));
    alert(e.message);
  }
}

Заключение

Supabase даёт быстрый и удобный путь для реализации CRUD‑операций из клиентского приложения на React. Для прототипов и многих продуктовых приложений это выгодное решение: сокращается время разработки и упрощается поддержка базовой инфраструктуры. При переходе в продакшн обязательно настраивайте безопасность (RLS), избегайте хранения секретов в клиенте и улучшайте UX за счёт локального управления состоянием.

Краткие шаги для старта: создать проект в Supabase, добавить таблицу через SQL Editor, настроить клиент в React и реализовать CRUD‑операции. После этого — усилить безопасность, добавить тесты и оптимизировать производительность.

Важно: выбирая BaaS, оцените требования к безопасности, конфиденциальности и масштабу — в некоторых сценариях собственный бэкенд остаётся предпочтительным вариантом.