Is TanStack Query a replacement for Redux or Zustand?

No. TanStack Query manages server state (data fetched from APIs), while Redux/Zustand manage client state (UI state, form state). They complement each other and are often used together.

How does automatic caching work?

Each query is cached by its queryKey. When the same key is requested again, cached data is shown immediately while a background refetch occurs if the data is stale. Stale time and cache time are configurable per query.

Does it work outside of React?

Yes. TanStack Query has framework-specific packages for React, Vue, Solid, and Svelte. The core @tanstack/query-core package is framework-agnostic.

TanStack Query

Powerful asynchronous state management for data fetching, caching, and synchronization in React, Vue, Solid and Svelte.

Version: v5.32

Official Documentation ↗

Installation

npmnpm install @tanstack/react-query

pnpmpnpm add @tanstack/react-query

yarnyarn add @tanstack/react-query

Methods

useQuery

useQuery(options: { queryKey, queryFn, ...options }): QueryObserverResult

Core hook for fetching, caching, and subscribing to server state.

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
    staleTime: 5 * 60 * 1000,
  });

  if (isLoading) return <Spinner />;
  if (error) return <Error />;
  return <div>{data.name}</div>;
}

useMutation

useMutation(options: { mutationFn, onSuccess, onError, ... }): UseMutationResult

Handles data mutations with automatic cache invalidation and optimistic updates.

const mutation = useMutation({
  mutationFn: (newUser) => fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(newUser),
  }),
  onSuccess: () => queryClient.invalidateQueries(['users']),
});

mutation.mutate({ name: 'Alice', email: '[email protected]' });

QueryClient

new QueryClient(options?: QueryClientConfig)

Central cache manager that stores and coordinates all query state.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 60000, retry: 3 },
  },
});

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

FAQ

Is TanStack Query a replacement for Redux or Zustand?: No. TanStack Query manages server state (data fetched from APIs), while Redux/Zustand manage client state (UI state, form state). They complement each other and are often used together.
How does automatic caching work?: Each query is cached by its queryKey. When the same key is requested again, cached data is shown immediately while a background refetch occurs if the data is stale. Stale time and cache time are configurable per query.
Does it work outside of React?: Yes. TanStack Query has framework-specific packages for React, Vue, Solid, and Svelte. The core @tanstack/query-core package is framework-agnostic.

Report a problem with this API docOpens a pre-filled issue on GitHub.