npmBeginner-friendly

react-query

Hooks for managing, caching and syncing asynchronous and remote data in React

reactdata-fetchingcachingserver-stateasynctypescriptcachedatafetchgraphql

The Problem

React components that fetch data end up managing an explosion of state: loading, error, data, refetching, stale, and more — all in useEffect hooks that leak, fire twice in StrictMode, and don't deduplicate identical requests. TanStack Query (formerly React Query) treats server data as a separate concern from UI state.

Mental Model

React Query maintains a client-side cache keyed by query keys. When two components request the same key, they share one fetch. Data is considered 'stale' after a configurable time and refetched automatically on window focus or remount. You describe what data you need with a query key and an async function; React Query handles when and how to fetch it.

60-second start

Install react-query

npm install react-query
import { } from 'react-query';

Use it when

Use React Query for any React app that fetches server data: REST APIs, GraphQL, or any async function. It replaces 95% of the useEffect+useState patterns for data fetching and adds caching, background refetching, and optimistic updates for free.

Skip it when

React Query is for server state (data that lives on a server). For UI state (modals, form values, local toggles), use useState or Zustand. If you're already using a full data layer like Apollo Client for GraphQL, React Query is redundant.

Alternatives

swrVercel's data fetching library with a similar model — slightly simpler API, slightly less features

apollo-clientPurpose-built for GraphQL — normalised cache and automatic type generation make it worth the complexity

rtk-queryRedux Toolkit's data fetching — good if you're already using Redux and want everything in one place

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.