TanStack Query — Async State & Data Fetching for the Web

What TanStack Query Does

• Caching — automatic with configurable staleTime/gcTime
• Deduping — identical requests collapsed
• Background refetch — on window focus, reconnect, interval
• Pagination/Infinite queries — first-class support
• Mutations — optimistic updates with rollback
• Devtools — inspect cache state in real time

Architecture

Singleton QueryClient holds the cache. Each useQuery subscribes via queryKey. Cache invalidation uses key prefix matching: queryClient.invalidateQueries({ queryKey: ["todos"] }).

Self-Hosting

No backend. Client-only library. Install via package manager.

Key Features

• Framework-agnostic core
• Typed queries (infer from queryFn)
• Optimistic updates
• Parallel & dependent queries
• Prefetching & SSR support (Next.js, Remix, Nuxt)
• Offline support
• Automatic retries with exponential backoff

Comparison

FAQ

Q: Does it conflict with Redux? A: No. Redux manages client state; Query manages server state. Use them together.

Q: What's the difference between staleTime and gcTime? A: staleTime determines how long before data becomes stale (triggering a background refetch); gcTime determines how long unsubscribed data stays in the cache before being removed.

Q: Does it support SSR? A: Yes. Use HydrationBoundary + dehydrate to prefetch on the server.

Sources & Credits

• Docs: https://tanstack.com/query
• GitHub: https://github.com/TanStack/query
• License: MIT