code-enforce-route-data

What problem does it solve?

It prevents cache drift and SSR/client mismatches by enforcing a single, consistent pattern for how TanStack Start routes prefetch server data and how components read from React Query.

Core Features & Use Cases

• Colocated queryOptions + hooks: For each feature, routes import a single source of truth from src/queries so the queryKey and queryFn stay identical between loader and component.
• Loader prefetch with ensureQueryData: Routes pre-warm the React Query cache using queryClient.ensureQueryData (including Promise.all for multiple queries) so the first paint has data and there is no loading flash.
• Intent prefetch via <Link> navigation: In-app navigation uses @tanstack/react-router <Link> (including Button-as-child patterns) to warm loader cache before the user clicks, aligning navigation behavior with data requirements.

Quick Start

Use this skill when adding or editing any TanStack Start route that reads server data, ensuring you add a loader that calls ensureQueryData with the colocated queryOptions and read the same query in the route component.