tanstack-query

TanStack Query automates data fetching, caching, and server-state synchronization in React. Use useQuery with a queryFn that returns a promise and an array-based queryKey; the library handles cache lifecycle, background refetching, and stale data invalidation automatically.

TanStack Query works with any data source that returns a promise, including REST and GraphQL. Define your queryFn to call either endpoint type, configure staleTime and gcTime for cache behavior, and use the same query and mutation hooks across both.

Use useMutation with onSuccess and onSettled side effects to manage mutation outcomes and trigger cache invalidation. Optimistic updates let you update UI immediately while the server request completes, then reconcile if needed.

TanStack Query provides useInfiniteQuery for paginated or infinite-scroll data. It manages multiple pages in cache, tracks page state, and coordinates refetching—eliminating manual pagination logic and duplicate fetches.

TypeScript is not required but strongly recommended. TanStack Query v5 includes first-class TypeScript support with type-safe query keys, strongly typed queryFn arguments, and mutation payloads for better developer experience and fewer runtime errors.

Use prefetchQuery to load data before user interaction, and share queryKey across components so TanStack Query deduplicates requests. Configure refetch behavior with staleTime and refetchOnWindowFocus to control when data updates automatically.