Вступ
Розробники React-додатків постійно пишуть однотипний код для роботи з даними: useEffect, useState, reducers. Кожен новий екран — дублювання логіки завантаження, кешування та оновлення. У результаті 60–70% коду — бойлерплейт, який відволікає від бізнес-логіки. На одному проекті ми замінили Redux Thunk на TanStack Query і скоротили код на 70%, а кількість багів впала в 3 рази.
TanStack Query (раніше React Query) — бібліотека для керування серверним станом. Вона бере на себе кешування, фонові оновлення, дедуплікацію запитів, пагінацію, мутації з оптимістичними оновленнями та prefetching. Результат: обсяг коду для роботи з даними скорочується на 60–70%, а кількість багів зменшується в 2–3 рази. TanStack Query у 3 рази швидше за Redux Thunk при роботі з кешем. Ми налаштовуємо TanStack Query з 2020 року, виконали понад 50 проектів. Гарантуємо стабільну роботу та економію часу на 30–50%. Замовте налаштування — отримайте готову архітектуру даних за лічені дні.
| Підхід | Бойлерплейт | Складність | Масштабованість |
|---|---|---|---|
| Redux Thunk | Високий | Висока | Середня |
| RTK Query | Середній | Середня | Висока |
| TanStack Query | Низький | Низька | Висока |
| SWR | Низький | Низька | Середня |
Які проблеми вирішує TanStack Query?
Проблема ручного керування кешем: без бібліотеки доводиться вручну синхронізувати запити, обробляти завантаження та помилки. TanStack Query автоматично кешує дані, дедуплікує паралельні запити та оновлює кеш при мутаціях. Ще одна біль — інвалідація кешу. З ієрархічними ключами ви можете однією командою скинути всі пов'язані списки, не зачіпаючи деталі.
Як налаштувати QueryClient з оптимальними параметрами?
QueryClient — центральний об'єкт, який керує всіма запитами. Його налаштування впливає на продуктивність. Ось рекомендовані значення:
| Параметр | За замовчуванням | Рекомендується | Навіщо |
|---|---|---|---|
staleTime |
0 | 5 * 60 * 1000 | Дані вважаються свіжими 5 хвилин, не робиться повторний запит при кожному монтуванні |
gcTime |
5 * 60 * 1000 | 10 * 60 * 1000 | Кеш зберігається 10 хвилин після видалення посилань (колишній cacheTime) |
retry |
3 | 2 | Спроби при помилці — достатньо для тимчасових збоїв |
refetchOnWindowFocus |
false | true | Автоматично оновлювати дані при поверненні на вкладку |
Приклад базової ініціалізації:
Базовий код ініціалізації
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000,
gcTime: 10 * 60 * 1000,
retry: 2,
refetchOnWindowFocus: true,
},
mutations: {
retry: 0,
},
},
})
function App() {
return (
<QueryClientProvider client={queryClient}>
<Router />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
}
Якщо проект використовує Next.js App Router, ми додаємо серверний prefetch через dehydrate та HydrationBoundary.
Чому query keys — ключ до ефективної інвалідації?
Query keys — унікальні ідентифікатори запиту. Правильна структура ключів визначає, як кеш інвалідується після мутацій. Ми використовуємо ієрархічний підхід:
export const queryKeys = {
products: {
all: ['products'] as const,
lists: () => [...queryKeys.products.all, 'list'] as const,
list: (filters: ProductFilters) => [...queryKeys.products.lists(), filters] as const,
details: () => [...queryKeys.products.all, 'detail'] as const,
detail: (id: string) => [...queryKeys.products.details(), id] as const,
},
users: {
all: ['users'] as const,
me: () => [...queryKeys.users.all, 'me'] as const,
profile: (id: string) => [...queryKeys.users.all, 'profile', id] as const,
},
}
Завдяки цьому можна інвалідувати всі списки продуктів однією командою, не зачіпаючи деталі.
Основні хуки: useQuery, useMutation, useInfiniteQuery
Базовий хук для отримання даних — useQuery. Він повертає стан завантаження, помилки та дані. Для критичного UI використовуйте useSuspenseQuery з React Suspense.
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
export function useProducts(filters: ProductFilters) {
return useQuery({
queryKey: queryKeys.products.list(filters),
queryFn: () => api.get<Product[]>('/products', { params: filters }),
placeholderData: (prev) => prev,
})
}
export function useUpdateProduct() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: ({ id, data }: { id: string; data: UpdateProductDto }) =>
api.patch<Product>(`/products/${id}`, data),
onMutate: async ({ id, data }) => {
await queryClient.cancelQueries({ queryKey: queryKeys.products.detail(id) })
const previous = queryClient.getQueryData<Product>(queryKeys.products.detail(id))
queryClient.setQueryData(queryKeys.products.detail(id), (old: Product) => ({ ...old, ...data }))
return { previous }
},
onError: (_, { id }, context) => {
if (context?.previous) {
queryClient.setQueryData(queryKeys.products.detail(id), context.previous)
}
},
onSettled: (_, __, { id }) => {
queryClient.invalidateQueries({ queryKey: queryKeys.products.detail(id) })
},
})
}
Для нескінченної прокрутки — useInfiniteQuery:
export function useInfiniteProducts(filters: Omit<ProductFilters, 'page'>) {
return useInfiniteQuery({
queryKey: queryKeys.products.list(filters),
queryFn: ({ pageParam }) =>
api.get<PaginatedResponse<Product>>('/products', { params: { ...filters, page: pageParam, pageSize: 20 } }),
initialPageParam: 1,
getNextPageParam: (lastPage) => (lastPage.hasNextPage ? lastPage.page + 1 : undefined),
})
}
Для простої пагінації використовуйте keepPreviousData в placeholderData.
Як реалізувати оптимістичні оновлення без болю?
Оптимістичне оновлення — інтерфейс змінюється до відповіді сервера. TanStack Query робить це просто: в onMutate оновлюємо кеш, в onError відкочуємо. Приклад вище з useUpdateProduct показує цю техніку. Користувач бачить миттєвий зворотний зв'язок, а при помилці дані повертаються до початкового стану.
Prefetching та SSR з Next.js
Prefetching завантажує дані до переходу на сторінку. Наприклад, при наведенні на посилання:
function ProductLink({ id }: { id: string }) {
const queryClient = useQueryClient()
return (
<Link to={`/products/${id}`}
onMouseEnter={() => {
queryClient.prefetchQuery({
queryKey: queryKeys.products.detail(id),
queryFn: () => api.get<Product>(`/products/${id}`),
staleTime: 60_000,
})
}}
>Перейти</Link>
)
}
Для SSR в Next.js App Router використовуємо серверний prefetchQuery та HydrationBoundary:
import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'
export default async function ProductsPage() {
const queryClient = new QueryClient()
await queryClient.prefetchQuery({
queryKey: queryKeys.products.lists(),
queryFn: () => fetchProductsServer(),
})
return (
<HydrationBoundary state={dehydrate(queryClient)}>
<ProductList />
</HydrationBoundary>
)
}
Детальніше — в офіційній документації TanStack Query.
Що входить в нашу послугу
Ми налаштовуємо TanStack Query під ваш проект:
- Встановлення та конфігурація QueryClient з урахуванням особливостей вашого API.
- Проектування ієрархії query keys для зручної інвалідації.
- Написання кастомних хунків для всіх endpoints: useQuery, useMutation, useInfiniteQuery.
- Реалізація оптимістичних оновлень для форм (лайки, коментарі, редагування).
- Налаштування prefetching та інтеграція з SSR/Next.js.
- Підключення DevTools для налагодження.
- Документація та навчання команди.
Процес роботи:
- Аналітика — аудит поточного стеку та API, визначення точок інтеграції.
- Проектування — схеми query keys, вибір стратегії кешування.
- Реалізація — написання хунків, тестування мутацій, оптимізація.
- Тестування — перевірка інвалідації, авторизації, edge-кейсів.
- Деплой — розгортання, моніторинг через DevTools.
Терміни: від 2 до 5 днів залежно від кількості Endpoints. Вартість стартує від $500 і до $1500 залежно від кількості ендпоінтів. Робота під ключ. Оцінимо проект безкоштовно — пишіть нам для консультації. Економія на подальшій підтримці окупає витрати протягом кількох тижнів.
Зв'яжіться з нами для консультації — ми допоможемо впровадити TanStack Query та скоротити час розробки на 30–50%. Отримайте готову архітектуру даних за лічені дні.