Frontend & Design

TanStack Query Data Fetching

Manage server state with TanStack Query, handling caching, background updates, stale data, and pagination automatically.

Claude Code Cursor Copilot Windsurf Gemini CLI

Overview

TanStack Query (formerly React Query) is the standard for server state management in React applications. AI agents can set up query clients, write query and mutation hooks, implement optimistic updates, configure caching strategies, and handle pagination and infinite scroll patterns.

The library distinguishes between server state (data from APIs) and client state (UI state), solving the common problem of mixing the two. Your AI agent can implement `useQuery` for data fetching with automatic refetching, `useMutation` for create/update/delete operations with cache invalidation, and `useInfiniteQuery` for paginated lists.

TanStack Query now supports React, Vue, Solid, Svelte, and Angular. AI agents can configure query defaults, implement retry strategies, set up query prefetching for faster navigation, and build offline-first applications with query persistence.

Who Is This For?

Frontend developers managing API data with automatic caching
Teams implementing optimistic updates for responsive UIs
Developers building infinite scroll and paginated lists
Engineers building offline-capable applications with query persistence

Installation

Setup for Claude Code

npm install @tanstack/react-query
# Optional: npm install @tanstack/react-query-devtools

Configuration

// App.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 5 * 60 * 1000, retry: 2 },
  },
});

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