TanStack is a collection of headless, framework-agnostic libraries for building modern web applications with full TypeScript support. Born from React Query, TanStack now provides specialized tools for data fetching (Query), routing (Router), tables (Table), forms (Form), virtualization (Virtual), and full-stack development (Start). Each library is designed to handle complex UI patterns while remaining completely unstyled—you control the markup and styling. The ecosystem's strength lies in type safety everywhere: route params, query keys, form state, and table columns all enjoy deep inference, catching errors at compile time rather than runtime.
What This Cheat Sheet Covers
This topic spans 14 focused tables and 92 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: TanStack Query Core Concepts
TanStack Query (formerly React Query) manages server state by treating it separately from client state, handling caching, background refetching, and staleness automatically without global state management.
| Concept | Example | Description |
|---|---|---|
useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) | • Fetches and caches data • returns data, isLoading, isError, and refetch• automatically refetches when component mounts if data is stale | |
['todos', { status: 'done', userId: 1 }] | • Array uniquely identifying query • used for caching and invalidation • must be serializable • nested objects are fine but order matters | |
async () => { const res = await fetch('/api/todos'); return res.json() } | • Async function returning data or throwing error • receives queryKey and signal for cancellation• must return serializable data | |
useQuery({ queryKey: ['user'], queryFn: getUser, staleTime: 60000 }) | • Duration (ms) data is considered fresh • defaults to 0 (instantly stale)• while fresh, query won't refetch in background |