TanStack Query v5
AdvancedServer state management: caching, background updates, optimistic updates, infinite scroll
What is TanStack Query?
TanStack Query (formerly React Query) manages server state — data that lives on a server and needs to be fetched, cached, synchronized, and updated. It handles loading states, caching, background refetching, pagination, and much more automatically. Install:npm i @tanstack/react-queryQueryClient Setup & Provider
beginnerWrap your app with QueryClientProvider. Configure defaults like staleTime and retry. Add ReactQueryDevtools for debugging.
useQuery — Fetching & Caching Data
beginnerThe primary hook for data fetching. Handles loading/error/success states, caching, background refetching, and deduplication automatically.
useMutation — Create, Update, Delete
intermediateHandle write operations with automatic loading states, error handling, and optimistic updates. Invalidate queries to trigger refetches after mutations.
useInfiniteQuery — Infinite Scroll & Pagination
advancedFetch paginated data with automatic accumulation of pages. Perfect for infinite scroll lists, load-more buttons, and cursor-based pagination.
Advanced Patterns — Prefetching, Suspense & QueryClient
expertPrefetch data before navigation, use Suspense for declarative loading, manage cache directly with QueryClient for complex scenarios.