tanstack-query-best-practices

TanStack Query cache management relies on stable query keys using typed tuples to ensure predictable data fetching and mutation invalidation. Structuring keys hierarchically allows precise cache invalidation across routes like channels and programs while maintaining UI sync.

The best way to organize TanStack Query hooks is colocating them in a designated directory like packages/client/src/hooks/. This promotes reusable data access patterns with cohesive examples like useChannels and useRecordings, ensuring consistent server-state management across the application.

Mutation invalidation in React Query requires stable query keys tied to your data boundaries. By invalidating specific query keys after mutations, cached data refreshes automatically, keeping UI in sync across screens and reducing data staleness without manual refetching.

Configuring a single QueryClient lifecycle involves initializing one client instance with centralized default options. This predicts retry behavior and freshness across the app, ensuring consistent server-state management and avoiding duplicate cache boundaries in client applications.

Stale time strategies in TanStack Query should balance performance and freshness by modularizing cache boundaries. Configuring appropriate stale times per query type reduces unnecessary refetching while ensuring data remains current for routes like channels, programs, and recordings.

TanStack Query supports route integration with prefetching and cached data reuse. By leveraging clear error handling and stable query keys, cached data transfers seamlessly between routes, improving performance while maintaining predictable freshness behavior across the React application.