← ClaudeAtlas

tanstack-startlisted

TanStack Start, Router, Query, and Server Functions patterns and best practices for this project.
dlupiak/claude-session-dashboard · ★ 57 · AI & Automation · score 82
Install: claude install-skill dlupiak/claude-session-dashboard
# TanStack Start Patterns ## Server Functions - Define with `createServerFn` from `@tanstack/react-start` - Use `.validator()` for input validation (e.g. with zod) - Use `.handler()` for the implementation - Server functions run on the server only — safe for DB access and secrets ## Router - File-based routing in `src/routes/` - Use `createFileRoute` for route definitions - Use `loader` for server-side data fetching (runs on server) - Use `beforeLoad` for auth guards and redirects - Route context flows from `__root.tsx` to child routes ## Query - Use `queryOptions` to define reusable query configs - Use `useSuspenseQuery` in components for data fetching - Invalidate queries after mutations with `queryClient.invalidateQueries()` - TanStack Query handles caching, deduplication, and background refetching ## Key Conventions - Path alias: `@/` → `apps/web/src/` - Route files: `src/routes/<path>.tsx` - Layouts: `src/routes/_<layout>.tsx` (pathless layout routes) - API routes: `src/routes/api/<name>.ts`