Заголовок: Я переписал react-query | Легковесный хук для асинхронного получения данных и кэширования в React
Привет всем!
Я разработал легковесный React-хук, аналогичный React Query, с основными функциями: получение данных, кэширование, повторные попытки и др. Он компактнее и проще в настройке. Полный код доступен на GitHub и в npm как api-refetch.
Зачем создавать собственный хук?
Легковесность: React Query и SWR мощные, но крупные. Мой хук идеален, когда важен размер пакета, особенно для зависимостей вроде Intlayer.
Настройка и оптимизация: Возможность хранения данных в локальном хранилище и управления параллельными запросами. Копируя или клонируя код, можно удалить ненужные функции, уменьшив размер бандла и повысив производительность.
Без провайдера: Избегаю использования Context Provider для глобального доступа, предлагая версию на базе Zustand.
Учебное упражнение: Понимание внутренностей кэширования и управления состоянием.
Создание собственного хука позволило сосредоточиться на нужных функциях, сохраняя библиотеку маленькой и понятной.
Функции
Получение данных и управление состоянием: Загрузка, ошибки, успешные данные.
Кэширование и хранение: Через React или Zustand, поддержка локального хранилища.
Повторные попытки и валидация: Настраиваемые лимиты и интервалы.
Активация и инвалидизация: Управление запросами в зависимости от других данных.
Параллельные запросы: Предотвращение дублирования запросов при монтировании нескольких компонентов.
Пример использования
Установка
Клонируйте репозиторий или установите через npm:
npm install api-refetch
Быстрый пример
import { AsyncStateProvider, useAsync } from "api-refetch";
function App() {
return (
<AsyncStateProvider>
<UserDetails />
</AsyncStateProvider>
);
}
const fetchUserData = async () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ name: "John Doe" });
}, 1000);
});
};
const UserDetails = () => {
const { isLoading, data, error, revalidate } = useAsync(
"userDetails",
fetchUserData,
{
enable: true,
cache: true,
store: true,
retryLimit: 3,
retryTime: 10000,
autoFetch: true,
revalidation: true,
revalidateTime: 300000,
onSuccess: (data) => console.log("Данные получены:", data),
onError: (error) => console.error("Ошибка:", error),
}
);
if (isLoading) return <div>Загрузка...</div>;
if (error) return <div>Ошибка: {error}</div>;
return (
<div>
<h1>{data?.name}</h1>
<button onClick={revalidate}>Обновить</button>
</div>
);
};
Попробуйте api-refetch, сообщите об ошибках или внесите вклад. Обратная связь приветствуется!
GitHub: api-refetch
Счастливого кодинга!
