Перейти к основному содержимому

Хуки базы данных

Хук useDatabase предоставляет методы для работы с базой данных EMD Cloud в React приложениях.

useDatabase(collectionId)​

Параметры​

  • collectionId (string) — ID коллекции для работы

Возвращаемые значения​

МетодОписание
getRows()Получить список записей
getRow()Получить одну запись
createRow()Создать запись
updateRow()Обновить запись
deleteRow()Удалить запись
countRows()Подсчитать записи

Примеры​

Список записей​

import { useDatabase } from '@emd-cloud/react-components';
import { useState, useEffect } from 'react';

function ProductList() {
  const { getRows } = useDatabase('products-collection-id');
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    async function loadProducts() {
      const result = await getRows({
        limit: 50,
        useHumanReadableNames: true
      });
      
      setProducts(result.data);
      setLoading(false);
    }
    
    loadProducts();
  }, [getRows]);
  
  if (loading) return <div>Загрузка...</div>;
  
  return (
    <div>
      {products.map(product => (
        <div key={product._id}>
          <h3>{product.name}</h3>
          <p>{product.price} ₽</p>
        </div>
      ))}
    </div>
  );
}

Создание записи​

function CreateProduct() {
  const { createRow } = useDatabase('products');
  const [formData, setFormData] = useState({ name: '', price: 0 });
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const newProduct = await createRow(formData);
    console.log('Создан продукт:', newProduct._id);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        placeholder="Название"
      />
      <input
        type="number"
        value={formData.price}
        onChange={(e) => setFormData({ ...formData, price: Number(e.target.value) })}
        placeholder="Цена"
      />
      <button type="submit">Создать</button>
    </form>
  );
}

Фильтрация и поиск​

function FilteredList() {
  const { getRows } = useDatabase('users');
  const [users, setUsers] = useState([]);
  const [filter, setFilter] = useState('all');
  
  useEffect(() => {
    async function loadUsers() {
      const query = filter === 'all' ? {} : {
        "$and": [{ "data.status": { "$eq": filter } }]
      };
      
      const result = await getRows({ query, limit: 50 });
      setUsers(result.data);
    }
    
    loadUsers();
  }, [filter, getRows]);
  
  return (
    <div>
      <select value={filter} onChange={(e) => setFilter(e.target.value)}>
        <option value="all">Все</option>
        <option value="active">Активные</option>
        <option value="inactive">Неактивные</option>
      </select>
      
      {users.map(user => (
        <div key={user._id}>{user.name}</div>
      ))}
    </div>
  );
}

Обновление и удаление​

function ProductItem({ productId }) {
  const { getRow, updateRow, deleteRow } = useDatabase('products');
  const [product, setProduct] = useState(null);
  const [editing, setEditing] = useState(false);
  
  useEffect(() => {
    async function loadProduct() {
      const data = await getRow(productId);
      setProduct(data);
    }
    
    loadProduct();
  }, [productId, getRow]);
  
  const handleUpdate = async (newData) => {
    await updateRow(productId, newData);
    setProduct({ ...product, ...newData });
    setEditing(false);
  };
  
  const handleDelete = async () => {
    if (confirm('Удалить продукт?')) {
      await deleteRow(productId);
      // Обновить список
    }
  };
  
  if (!product) return <div>Загрузка...</div>;
  
  return (
    <div>
      {editing ? (
        <EditForm product={product} onSave={handleUpdate} />
      ) : (
        <>
          <h3>{product.name}</h3>
          <p>{product.price} ₽</p>
          <button onClick={() => setEditing(true)}>Редактировать</button>
          <button onClick={handleDelete}>Удалить</button>
        </>
      )}
    </div>
  );
}

Следующие шаги​

Полезные ссылки​