tanstack-query

To cache server-state in React, you fetch remote data using query hooks with stable query keys and query functions. The cache applies a stale-while-revalidate strategy, instantly reusing fetched data while refetching in the background to keep views updated.

Optimistic updates and cache invalidation are handled by using mutation hooks to immediately update the UI with predicted data, then invalidating relevant query keys after the server responds to ensure the final cached data matches the remote state.

The best way to manage data-fetching for paginated or infinite scrolling UIs is orchestrating cache requests through dedicated pagination and infinite loading query patterns, which coordinate background refetching and data synchronization for responsive UX.

TanStack Query works with GraphQL and tRPC data retrieval by managing asynchronous server-state fetching across any REST, GraphQL, or tRPC endpoint, handling retries, cancellation, and lifecycle states for both reads and writes.

Stable query keys are required for server-state caching because they uniquely identify and store fetched data, enabling the cache to reuse previously fetched data instantly, coordinate background refetching, and accurately target cache invalidation after mutations.

You should not use manual data-fetching when your application requires background refetching, dependent or parallel request orchestration, or optimistic updates, as managing these lifecycle states manually is error-prone without a dedicated server-state cache.