Query
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.
- status
- success
- isFetching
- false
- staleTime
- 3,200
- mutation
- idle
Server and client state are not the same
Deadly defaults kill boring work.
Caching, request deduplication, retries, background refetching, window-focus updates, and garbage collection arrive wired for real applications.
Cache lifecycle
Keep data useful while the network catches up.
Stale data can remain valuable. Render from cache immediately, refresh quietly, and clean up only after the last observer leaves.
1
Fetch
A query function resolves data while Query owns cancellation, retries, and deduplication.
2
Share
Every observer reads the same cache entry instead of issuing another request.
3
Revalidate
Stale data stays visible while a background request refreshes it.
4
Collect
Unused data remains available briefly, then garbage collection removes it.
Mutations
Writes update the world, then the cache.
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