tanstack-query

Manage server state in React by installing TanStack Query v5 and wrapping your app with a QueryClientProvider to handle data fetching, caching, and synchronization across client-server interactions.

Structure query keys using hierarchical query key factories to ensure accurate cache invalidation. This pattern organizes dependencies clearly, allowing precise control over which cached server state updates when mutations occur.

TanStack Query v5 works with Suspense by providing first-class Suspense hooks, allowing you to handle data fetching with cleaner React components that suspend until server state is fully loaded.

Test react-query data fetching by using Mock Service Worker (MSW) to mock server responses, ensuring reliable unit and integration tests for your query functions and mutation workflows without hitting live APIs.

Handle optimistic updates by implementing react-query mutations with structured cache updates and rollback strategies, allowing the UI to reflect expected server state changes immediately before confirmation.

TanStack Query handles authentication by using enabled flags to gate protected queries and managing token refresh workflows, ensuring server state requests automatically pause or retry when authorization credentials expire.