TanStack Query

TanStack Query (React Query) кэширует async-состояние по query keys. `useQuery` загружает и отслеживает статус; `useMutation` пишет с optional optimistic updates и инвалидацией.

					const { data, isLoading, error } = useQuery({
  queryKey: ['todos', filter],
  queryFn: () => fetchTodos(filter),
  staleTime: 60_000,
});

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

| Опция | Роль | |-------|------| | queryKey | Идентичность кэша — включайте все переменные | | staleTime | Как долго данные «свежие» без refetch | | gcTime | Сколько живёт неиспользуемый кэш | | enabled | Не fetch, пока условие false |

Prefetch на hover, параллельные запросы через `useQueries`, общий `QueryClient` для SSR dehydration.

Компромисс: мощная оркестрация кэша против дисциплины проектирования ключей и устаревшего UI при игноре дефолтов.

На интервью: дизайн ключей, stale vs garbage collection, поток mutation + инвалидация.

Типовые ошибки: нестабильные query keys (inline objects), staleTime 0 и шторм refetch, mutations без плана optimistic rollback.

Чеклист:

• Стабильные иерархические query keys.
• staleTime под тип данных.
• invalidateQueries или setQueryData после записей.
• Осторожный dehydrate/hydrate для SSR.