tanstack-query

Data fetching with TanStack Query handles server state management, caching, and automatic invalidation in React applications. Use useSuspenseQuery or useQuery hooks to fetch data with built-in cache management, eliminating manual synchronization logic and reducing boilerplate.

Mutations in TanStack Query use useMutation to manage data modifications with optimistic updates that immediately reflect changes in the UI before server confirmation. This approach provides faster perceived performance and seamless user experience during create, update, and delete operations.

useSuspenseQuery integrates React Suspense boundaries with data fetching, automatically handling loading states within your component tree. This eliminates conditional loading UI and produces cleaner, more declarative components in React 18+ applications.

TanStack Query v5 requires React 18+ and API updates: isLoading becomes isPending, cacheTime becomes gcTime, and onError/onSuccess/onSettled callbacks are removed. Migration replaces these APIs while preserving core functionality like cache management and prefetching.

Cache invalidation in TanStack Query uses manual updates, prefetching, and automatic garbage collection (gcTime) to maintain data freshness. Strategies include invalidating on mutation success, prefetching before user navigation, and configuring cache retention policies per query.

TanStack Query works with any HTTP client or API service pattern in React. No additional setup beyond installing TanStack Query v5 and wrapping your app with QueryClientProvider is required; hooks directly call your existing API functions.