TanStack Query Data Fetching

Manage server state in React with TanStack Query. Implements query caching, background refetching, optimistic updates, infinite scroll, pagination, and stale-while-revalidate patterns with full TypeScript support.

This skill helps you implement efficient data fetching with TanStack Query (React Query). It generates query and mutation hooks, configures caching strategies, implements optimistic updates, builds infinite scroll lists, handles dependent queries, and sets up prefetching for faster navigation.

When to use

Use when fetching data in React apps, implementing caching and background sync, building infinite scroll or paginated lists, or replacing manual useEffect + useState data fetching patterns.

Examples

Optimistic updates

Implement instant UI feedback with rollback on error

Build TanStack Query mutations with optimistic updates for a todo list — instant UI changes that rollback if the API call fails

Infinite scroll

Create an infinite scroll feed with prefetching

Implement an infinite scroll feed using useInfiniteQuery with cursor-based pagination and prefetching the next page