tanstack-query-best-practices

TanStack Query keys should be structured hierarchically as arrays to enable predictable cache invalidation in React. Standardizing query key arrays allows targeted invalidation of specific data-fetching entries without clearing unrelated server-state caches.

Optimistic updates in TanStack Query mutations involve temporarily updating the cache before the server response arrives. This pattern requires configuring mutation logic to roll back the cache automatically if the server request fails, ensuring robust error handling.

TanStack Query manages server-state caching by automatically fetching, updating, and invalidating cached data in the background. This differs from local React state by synchronizing asynchronous server data directly within the caching layer rather than manually managing component state.

TanStack Query caching strategies integrate with React SSR and SSG by prefetching data on the server and dehydrating the cache. The client then hydrates this server-state to prevent redundant data-fetching and ensure immediate data availability.

Stale data after a mutation occurs when TanStack Query cache invalidation rules are not triggered for the relevant query keys. Applying structured invalidation patterns immediately after successful mutations forces the cache to re-fetch the updated server-state.