What problem does it solve?
Modern React applications need a consistent, resilient way to fetch, cache, and update server state without cluttering components with loading and error boilerplate. This Skill documents patterns for using TanStack Query v5 to provide Suspense-based data loading, predictable cache behavior, and reliable mutation flows so UI remains fast and consistent.
Core Features & Use Cases
- Suspense-first queries: Adopt Suspense boundaries for simpler components and consistent loading UX using useSuspenseQuery.
- Legacy loading control: Use useQuery when component-level loading or error states are required.
- Mutations and optimistic updates: Patterns for onMutate, rollback on error, and post-mutation invalidation.
- Cache management: Invalidation, manual updates, prefetching, persistence, gcTime/staleTime tuning, and deduplication strategies.
- Advanced flows: Dependent queries, parallel queries, infinite pagination, query cancellation with abort signals, and integration with centralized API service layers.
- Error handling and tooling: Combine ErrorBoundary with Suspense and use Devtools for debugging cache state.
Quick Start
Use the tanstack-query patterns to fetch a list of posts with Suspense and prefetch the selected post on hover while keeping cache updates optimistic after a create operation.
