tanstack-query-patterns

What problem does it solve?

This Skill addresses the complexity of managing server state across React components by providing reusable TanStack Query patterns for data fetching, caching, and synchronization.

Core Features & Use Cases

• Reusable patterns: Factory options like usersQueryOptions, userQueryOptions, and userPostsQueryOptions to standardize data access.
• Cache & synchronization: Robust caching, invalidation, prefetching, and optimistic updates to keep UI in sync with server state.
• Use Case: Build efficient dashboards and lists by composing queries with hierarchical keys and parallel or dependent queries.

Quick Start

Install the TanStack Query library in your project: npm install @tanstack/react-query. Create a QueryClient and wrap your app with QueryClientProvider. Import and adopt the provided patterns, e.g., usersQueryOptions and userQueryOptions, to fetch data with built-in caching and invalidation.