Как реализовано кэширование запросов в React Query?

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

React Query (TanStack Query) предоставляет мощный механизм кэширования данных, получаемых с сервера. Каждый запрос идентифицируется уникальным ключом (query key), который используется для хранения и извлечения данных из кэша. Кэш хранится в памяти приложения и управляется автоматически.

Ключевые концепции

• staleTime — время в миллисекундах, в течение которого данные считаются свежими. По умолчанию 0, что означает, что данные сразу помечаются устаревшими.
• gcTime (ранее cacheTime) — время, в течение которого неиспользуемые данные остаются в кэше перед удалением. По умолчанию 5 минут.
• refetchOnMount — автоматический повторный запрос при монтировании компонента, если данные устарели.
• refetchOnWindowFocus — повторный запрос при фокусе окна браузера.

Пример настройки кэширования

import { useQuery } from '@tanstack/react-query';

function useTodos() {
  return useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    staleTime: 5 * 60 * 1000, // 5 минут данные считаются свежими
    gcTime: 10 * 60 * 1000,   // 10 минут данные хранятся в кэше после удаления компонента
  });
}

Инвалидация кэша

Для обновления данных после мутации используется инвалидация кэша с помощью queryClient.invalidateQueries. Это помечает данные как устаревшие и инициирует повторный запрос.

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

function useAddTodo() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });
}

Вывод

Кэширование в React Query позволяет значительно сократить количество запросов к серверу, улучшить производительность и обеспечить актуальность данных. Рекомендуется использовать staleTime для данных, которые редко меняются, и gcTime для управления памятью.