tanstack-query-expert

React data fetching and caching can be managed declaratively using TanStack Query's useQuery hook, replacing ad-hoc useEffect requests with a cohesive, cache-driven approach that handles staleTime and automatic background updates.

Cache invalidation with mutations in React Query automatically synchronizes your client state by invalidating specific query keys after a mutation completes, ensuring fetched data reflects server-side changes without manual refetch logic.

SSR hydration with TanStack Query in Next.js App Router integrates seamlessly, enabling server-to-client data sharing by dehydrating server query states and rehydrating them on the client to maintain consistent cache data.

Optimistic updates are fully supported with TanStack Query mutations, allowing you to immediately update the UI with expected changes before the server responds, then rolling back automatically if the mutation fails.

Configuring staleTime and retry behavior for React Query caches is done within the useQuery options, allowing fine-grained control over how long data remains fresh and how many times failed requests should automatically retry.

Strict query key design in TanStack Query is required to accurately identify cached data, ensuring correct cache invalidation and preventing stale data conflicts across different query parameters and mutation workflows.