| [ Web Proxy ] |
| Viewing: https://tanstack.com/query/latest | [Back] [Original] |
The server-state standard for modern frontend apps.
Query gives async data a cache, a lifecycle, and declarative APIs for fetching, sharing, refetching, mutating, and observing server state.
useQuery()
['issues', 'router-cache']
Components declare the data they need. The cache coordinates fetches, subscribers, freshness, retries, and background updates.
Server and client state are not the same
Caching, request deduplication, retries, background refetching, window-focus updates, and garbage collection arrive wired for real applications.
Cache lifecycle
Stale data can remain valuable. Render from cache immediately, refresh quietly, and clean up only after the last observer leaves.
1
A query function resolves data while Query owns cancellation, retries, and deduplication.
2
Every observer reads the same cache entry instead of issuing another request.
3
Stale data stays visible while a background request refreshes it.
4
Unused data remains available briefly, then garbage collection removes it.
Mutations
Optimistic UI, pending state, recovery, invalidation, and reconciliation stay explicit instead of scattering through components.
optimistic write
setQueryData(['todos'], next)
server mutation
await saveTodo(todo)
targeted refresh
invalidateQueries({ queryKey: ['todos'] })
rollback path
onError: restoreSnapshot
| Web Proxy Viewer | New URL | Original Page |