TanStack Query
TanStack Query (formerly React Query) is a data-fetching and caching library that manages server state in frontend applications, handling caching, background refetching, and synchronization automatically.
Definition
TanStack Query (formerly React Query) is a data-fetching and caching library that manages server state in frontend applications, handling caching, background refetching, and synchronization automatically.
Overview
Most client-side state libraries like Redux or Zustand are designed for state that lives entirely on the client. TanStack Query addresses a different problem: 'server state' — data that originates from a remote source, can become stale, and may be updated by other users or processes outside the application's control. It wraps data-fetching calls (to a REST API or GraphQL endpoint) in a caching layer that tracks loading, error, and success states automatically. A typical usage pattern uses the useQuery hook to fetch and cache data keyed by a query key, and useMutation to perform writes, with built-in support for automatic background refetching (e.g. when the window regains focus or network reconnects), stale-while-revalidate caching so users see cached data instantly while fresh data loads in the background, retries with backoff on failure, and optimistic updates that update the UI immediately before a mutation confirms. Originally built for React and known as React Query, the library was rebranded to TanStack Query as adapters for Vue, Svelte, Solid, and Angular were added, reflecting a broader shift toward framework-agnostic core logic with thin framework-specific bindings. It's commonly paired with a lightweight client-state library — Zustand or Recoil in React apps, Pinia in Vue apps — since TanStack Query intentionally doesn't manage pure UI state, only server-derived data. SWR is the most direct alternative, offering a similar stale-while-revalidate model with a smaller feature set.
Key Features
- Automatic caching of server data keyed by a query key
- Background refetching on window focus, network reconnect, or interval
- Stale-while-revalidate strategy shows cached data instantly while refreshing
- Built-in loading, error, and success state tracking for queries
- Optimistic updates for mutations before server confirmation
- Automatic retries with configurable backoff on failed requests
- Framework adapters for React, Vue, Svelte, Solid, and Angular
Use Cases
Frequently Asked Questions
From the Blog
How to Store and Query Metadata Alongside Embeddings
Design the payload before you index anything: flat, typed, low-cardinality fields for the things you will filter on, with tenant and permission keys applied server-side on every query. Then decide deliberately between pre-filtering and post-filtering, because that choice determines whether restrictive filters return empty results.
Read More AI & TechnologyQuery Rewriting and Expansion for Better Retrieval
Query rewriting turns what the user typed into what the index can actually match - resolving pronouns, expanding jargon, and splitting compound questions. This covers conversational rewriting, multi-query fan-out, hypothetical document embedding, and how to tell whether any of it is helping.
Read More Data ScienceHow to write a retention cohort query in SQL that survives review
Build a retention cohort in four layers: first event per user, a period index from date arithmetic, active-period facts, then the cohort-by-period grid. Most broken cohort charts come from partial trailing periods read as decline, time-zone boundaries misassigning users, and cohort dates recomputed on every run.
Read More Learn Through HobbiesLearn SQL Through Football Data
Football generates rich match data — goals, assists, passes, xG, red cards. This project uses a Premier League dataset to teach SQL SELECT, WHERE, GROUP BY, JOIN, and HAVING in a context that makes every query meaningful rather than abstract.
Read More