TanStack Query manages local copies of remote data in React. It is not a network-request library: you supply promise-returning functions, often built with fetch(), and it manages the resulting data, loading state, refreshes, and cache invalidation. This becomes useful when manual loaders and update handlers must repeatedly coordinate with one another to keep server data current. section 9.3.1 section 9.2.6 section 9.5
The architecture starts with one QueryClient for the application, supplied through QueryClientProvider. Queries retrieve data; mutations create, update, or delete it. Rather than fetching every affected list immediately after each change, a mutation can invalidate cached data so a later query knows to refresh it. The cache remains a local copy, not a second source of truth. section 9.3.1 section 9.3 section 9.2.6
Wire up a remote-data application
Define a function such as `const getCustomers = () => fetch('/api/customers/').then(res => res.json())`, then pass that promise-returning function to a query. At the application root, create `const queryClient = new QueryClient()` and render `<QueryClientProvider client={queryClient}><App /></QueryClientProvider>`. Define a separate function for a POST mutation; bundle its input into one argument. section 9.3.1
The cache also changes how a server-dependent interface behaves:
- Live queries can refetch after reconnection or renewed window focus. Failed requests are retried, and simultaneous components requesting the same query share a promise and response. section 9.3.4
- A configurable time interval can trigger refetching of stale queries; this setting is not enabled by default. section 9.3.4
- Optimistic or partial cached data can stay visible while the server responds. Reserve a prominent loader for requests with nothing useful to display; background fetching need not blank the interface. section 9.4.4 section 9.5
This is a trade-off, not a replacement for every state variable or request function. React can manage remote data directly, and SWR offers a simpler competing approach. TanStack Query earns its place when cache freshness, mutation follow-up, and responsive displays would otherwise require too much coordination code. section 9.2.6 section 9.3 section 9.5
