What problem does it solve? It prevents common React data-fetching mistakes such as fetching inside useEffect, mirroring server state in useState, race conditions, and double-fetching under StrictMode by enforcing TanStack Query conventions. ## Core Features & Use Cases - Query Options Factories: Define queries once with queryOptions and reuse them in both route loaders (ensureQueryData) and components (useSuspenseQuery). - Key Factory Pattern: Centralize query keys per resource ({ all, list(params), detail(id) }) so cache invalidation always goes through the factory. - URL-Driven State: Keep filters, pagination, and sorting in validated search params so query keys derive from the URL. - Use Case: When building a React route that displays a detail page, define the query in a factory, prefetch it in the route loader, and consume it with useSuspenseQuery while Suspense and ErrorBoundary handle loading and error states. ## Quick Start Apply the tanstack-query skill to refactor this component so it fetches data through a queryOptions factory and route loader instead of useEffect.
