Skip to main content

TanStack Query

What is TanStack Query​

TanStack Query (formerly known as React Query) is a data-fetching and server-state management library for React. It is MIT licensed, currently at v5, with ~20.5M weekly npm downloads and ~48.8k GitHub stars. TanStack Query is transport-agnostic — it works with REST, GraphQL, or any function that returns a promise.

Why we recommend it​

  • Stale-while-revalidate caching — serves cached data instantly while refetching in the background.
  • Automatic background refetching — re-fetches on window focus, network reconnect, and configurable intervals.
  • Request deduplication — multiple components requesting the same data share a single network request.
  • First-class TypeScript support — generic types infer query data and error shapes with minimal effort.
  • Rich mutation support — mutations with optimistic updates, rollbacks, and automatic query invalidation.
  • DevTools — a dedicated browser panel for inspecting query state, cache contents, and timings.

Why over alternatives​

  • vs manual fetch + useEffect — you'd re-implement caching, retries, dedup, GC, race conditions yourself for every endpoint. TanStack Query solves all of that with a single useQuery call.
  • vs SWR — SWR is lighter and simpler for basic fetch-and-cache. TanStack Query adds staleTime config, garbage collection, offline mutations, query cancellation, selectors, and cache hydration for SSR.
  • vs RTK Query — RTK Query is solid if the project already uses Redux Toolkit. TanStack Query is standalone — no Redux dependency — making it a better fit for our Zustand-based stack.
  • vs Apollo Client — Apollo provides a normalized cache purpose-built for GraphQL. For REST or mixed APIs, TanStack Query is more flexible and protocol-agnostic.

When to use​

  • Any React app that fetches data from REST or GraphQL APIs
  • Dashboards and data-heavy admin panels
  • CRUD applications with create/update/delete flows
  • Pagination-heavy or infinite-scroll UIs
  • Apps that benefit from optimistic updates and background sync

When NOT to use​

  • Purely static sites — if there are no API calls, there's nothing for TanStack Query to manage.
  • Purely client-side state — local UI state belongs in useState, useReducer, or Zustand.
  • Projects deeply committed to Apollo Client — if you already have a mature Apollo setup with a normalized GraphQL cache, switching offers diminishing returns.
tip

TanStack Query handles server state (data from APIs). For client state (UI toggles, form state, user preferences), use Zustand. The two are complementary — most projects benefit from using both.

Resources​