An interactive playground for learning TanStack Query visually. Each example lets you trigger real network requests and observe the full data lifecycle — status transitions, cache behavior, optimistic updates, and more — all in one place.
Live demo: tanstack-query.dzulfan.dev
| Example | Concepts |
|---|---|
| Query | useQuery, pending/success/error states, manual refetch() |
| Mutation | useMutation, write lifecycle, invalidateQueries |
| Cache | staleTime, gcTime, fresh → stale countdown, cache hits |
| Optimistic Update | onMutate, snapshot & rollback, cancelQueries |
| Pagination | keepPreviousData, per-page query keys, instant transitions |
| Infinite Query | useInfiniteQuery, getNextPageParam, fetchNextPage |
Each example includes:
- An interactive playground to trigger fetches, mutations, and errors
- A live Query Inspector showing real-time query state
- An Event Timeline tracing what happened and when
- Embedded code snippets for the hook and API layer
- An Engineering Insight explaining the problem, solution, and tradeoffs
- TanStack Query v5 — server state management
- React 19 + TypeScript
- Vite 8 — build tool
- Tailwind CSS v4 + shadcn/ui — styling
- React Router v6 — routing
- JSONPlaceholder — mock API
git clone https://github.com/dzulfanf/tanstack-query.git
cd tanstack-query
npm install
npm run devOpen http://localhost:5173.