Learning path — TanStack Atlas

Interactive lab

Run four concepts in one real interface.

Filters enter the URL, a loader prefetches Query, and creation crosses a Server Function before updating the cache. Use it alongside the lessons.

Open the Mini Issue Tracker

PATH / 001–19

Curriculum roadmap

Every lesson has an outcome, mental model, implementation, failure modes, and checkpoint.

01TanStack · FoundationTanStack is not one frameworkBefore installing packages, build a mental map of how Start, Router, and Query divide responsibility.8 min 02TanStack Start · FoundationCreate your first Start appUse the official CLI to create a minimal app and locate the route tree, root document, and development server.12 min 03TanStack Router · CoreBuild a route tree from filesCreate issue list and detail pages, then connect file names, path params, and inferred types.15 min 04TanStack Router · CorePut filters in the URLBuild shareable, refresh-safe, typed issue filters with validated search params.18 min 05TanStack Query · CoreLet the loader warm the Query cacheRouter decides when navigation happens while Query owns the cache. Connect them with one shared queryOptions object.22 min 06TanStack Query · AppliedWrite back from a Server FunctionValidate input at the network boundary, model write state with a mutation, then immutably update Query cache from the server response.24 min 07TanStack Router · ReliabilityContain errors in the right routeUse a global default as the safety net and route errorComponent to isolate local data or render failures.16 min 08TanStack Start · AppliedPut external endpoints in a Server RouteSeparate application RPC from public HTTP endpoints and use a native Response to express status, body, and cache policy.18 min 09TanStack Router · CorePass dependencies through Router ContextDeclare typed dependencies at the root, then use beforeLoad to add inferred context for a route subtree.20 min 10TanStack Query · CoreDefine when data is freshSeparate staleTime from gcTime and co-locate keys, fetchers, and time policy in shared queryOptions.20 min 11TanStack Start · IntermediateCompose request boundaries with MiddlewareSeparate request middleware from Server Function middleware and compose logging, context, and security checks with next().22 min 12TanStack Router · IntermediateBlock navigation away from a dirty formUse useBlocker for router navigation and browser unloads, with explicit state for a custom confirmation UI.18 min 13TanStack Query · IntermediatePropagate Query cancellation to the networkConsume the AbortSignal supplied to queryFn so obsolete fetches stop and cancellation state remains predictable.16 min 14TanStack Router · IntermediateConfirm identity before child routes loadProtect a route group with typed Router Context and a pathless layout beforeLoad while preserving the correct post-login destination.22 min 15TanStack Query · IntermediateKeep infinite lists bounded and recoverableDefine pagination with initialPageParam, cursors, and maxPages while preserving the pages and pageParams structure.24 min 16TanStack Query · ProductionIsolate and stream Query state across SSRUse the Router SSR Query integration for dehydration, hydration, and streaming while creating an isolated cache per server request.26 min 17TanStack Query · ProductionMake optimistic updates safe to roll backChoose UI-only pending output or a cache-level update, then handle failure and concurrency with cancellation, snapshots, rollback, and revalidation.25 min 18TanStack Table · FoundationModel issue data as a headless tableConnect data to semantic table markup with typed column definitions, a core row model, and flexRender while retaining full styling control.24 min 19TanStack Form · FoundationKeep fields, validation, and submission on one typeBuild a controlled form with useForm, Field, and Subscribe, making validation timing, error display, and async submission explicit.25 min