tanstack-query

Use when managing server state with TanStack Query (React Query) — data fetching, caching, mutations, optimistic updates, or infinite scrolling. Also use when replacing manual useEffect data fetching or integrating with tRPC.

Model	Source
sonnet	pack: state

Full Reference

┏━ 🔧 tanstack-query ━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when managing server state with TanStack Q… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

TanStack Query

Async state management for TypeScript/React. Replaces useEffect + useState for all server state with automatic caching, background refetching, and deduplication. v5.x requires React 18+ and TypeScript 4.7+.

Quick Reference

Item	Value
Install	npm install @tanstack/react-query
DevTools	npm install -D @tanstack/react-query-devtools
Version	v5.x
Key imports	useQuery, useMutation, useQueryClient, useInfiniteQuery
Docs	https://tanstack.com/query/latest

Reference Index

I want to…	File
Install, configure QueryClient, and set up the provider	reference/setup.md
Fetch data, use query options, write dependent queries, or cancel requests	reference/queries.md
Create, update, or delete data with useMutation	reference/mutations.md
Implement optimistic updates — variables-based or cache manipulation	reference/optimistic-updates.md
Paginate results or build infinite scroll	reference/infinite-queries.md
Configure staleTime, gcTime, prefetching, or SSR hydration	reference/caching.md
Use Suspense mode with useSuspenseQuery	reference/suspense.md
Set up DevTools or write tests for queries and mutations	reference/devtools.md

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.