How it works
You describe a query with a key, such as ['orders', userId], and a function that fetches it. TanStack Query caches the result under that key, shares it with every component that asks, refetches in the background when data goes stale or the window regains focus, retries failures and exposes loading and error states. Mutations change data on the server and can update the screen optimistically before the reply arrives.
It started as React Query and now has adapters for Vue, Svelte, Solid and Angular. It handles server state, not client state, so apps often pair it with a small store such as Zustand for the rest. SWR from Vercel is a lighter alternative, and RTK Query covers the same ground for Redux users.
TanStack Query pros and cons
Pros
- Caching, deduplication and background refresh built in
- Removes most hand-written loading and error state code
- Supports pagination, infinite scrolling and optimistic updates
- Dedicated DevTools for inspecting the cache
Cons
- Cache keys and stale times take time to understand
- Adds a dependency where framework loaders may already fetch data
- Not meant for purely local UI state
When to use TanStack Query
Pick it when
- Apps that read and write lots of API data
- Single-page apps talking to REST, GraphQL or Supabase
- Screens that must stay fresh without manual reloading
Skip it when
- Pages whose data is fully loaded by Server Components or route loaders
TanStack Query pricing
TanStack Query vs the alternatives
Related terms
More in Frontend
State and data