Как организовать кэширование и инвалидацию данных при работе с TanStack Query?

Основы кэширования в TanStack Query

TanStack Query (ранее React Query) предоставляет мощный механизм кэширования серверного состояния. Каждый запрос, выполненный через useQuery, автоматически сохраняет результат в кэше. Это позволяет мгновенно отображать данные при повторных обращениях, избегая лишних сетевых запросов. Ключевые параметры: staleTime (время, в течение которого данные считаются свежими) и gcTime (время хранения неактивных данных в кэше).

Инвалидация данных

Инвалидация — это процесс пометки кэшированных данных как устаревших. Основной метод — queryClient.invalidateQueries. Он принимает фильтр по ключу запроса и помечает все подходящие записи как stale, после чего активные компоненты автоматически перезапрашивают данные. Это критично после мутаций (создание, обновление, удаление).

import { useMutation, useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

const mutation = useMutation({
  mutationFn: updateUser,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['users'] });
  },
});

Практические стратегии

• Оптимистичные обновления: обновляйте кэш сразу, а затем откатывайте при ошибке.
• Частичная инвалидация: используйте точные ключи, чтобы не перезапрашивать лишние данные.
• refetchOnWindowFocus: автоматически обновляйте данные при возврате на вкладку.

Вывод

Правильная настройка кэширования и инвалидации в TanStack Query значительно улучшает производительность и UX. Используйте staleTime для часто неизменяемых данных, а invalidateQueries — после мутаций. Это стандартный подход для современных React-приложений.