staleTime, gcTime, useSuspenseQuery, optimistic updates.

TanStack Query v5 — Server-Cache State Done Right

TanStack Query v5 separates server state from client state. It defines a cache keyed by query keys, controls freshness with staleTime, manages garbage collection with gcTime, and coordinates background refetches. mastering the cache model eliminates the useEffect+fetch+loading-state boilerplate that plagues most React apps while giving you automatic background refresh, optimistic updates, and Suspense integration.

Interactive Pipeline Flow

SetupCoreOutput

🔑 Query Key — serialisable array

Query keys uniquely identify cached data. Use arrays: ["posts"] for collections, ["posts", id] for items, ["posts", id, "comments"] for nested.

Architecture Diagrams

Optimistic mutation pattern with rollback on error.

Loading diagram...

Key Design Decisions

⏱️Set staleTime per query type

User profile: staleTime: 1000 * 60 * 5 (5 min). Real-time data: staleTime: 0. Static reference data: staleTime: Infinity.

🔑Query keys are the cache address

Include all variables that affect the fetch in the key: ["posts", { userId, status }]. TanStack Query refetches when the key changes.

💡useSuspenseQuery replaces status checks

Wrap in <Suspense> and the component only renders when data is ready. Eliminates isLoading/isError conditional rendering.

Discussion