router-query-integration

This skill provides a systematic approach for integrating TanStack Router and TanStack Query, specifically designed for developers building high-performance Single Page Applications (SPAs). The core objective is to shift data fetching from the component render phase to the route loader phase, effectively eliminating request waterfalls and improving perceived performance. By leveraging query prefetching during the navigation lifecycle, this skill ensures that essential data is ready by the time the route component mounts, resulting in instant navigation experiences.

• Enables precise coordination between route loaders and query clients using ensureQueryData, prefetchQuery, and fetchQuery methods.

• Supports complex data requirements, including parallel fetching for multiple queries and sequential dependent queries that require prior route parameter validation.

• Facilitates strong type safety by utilizing the Query Options pattern, ensuring DRY (Don't Repeat Yourself) code across features and routes.

• Provides robust error handling patterns, allowing developers to catch loading failures within route loaders and surface them via standard Router error boundaries.

• Includes best practices for query invalidation and cache management, specifically when handling mutations to ensure data consistency across the application.

• Offers optimized configuration patterns for QueryClient to fine-tune staleTime and gcTime for better cache performance.

• Intended for front-end engineers working with React and TanStack ecosystem libraries who need to optimize complex navigation flows.

• Expected inputs include router route definitions, query key definitions, and API fetch functions.

• The primary output is a resilient, type-safe data loading architecture that guarantees data availability before component rendering.

• Constraints include keeping the queryClient singleton accessible for import within route modules and ensuring that loader logic remains pure to support SSR and navigation interrupts.

• Users are encouraged to implement QueryClientProvider at the application root to enable seamless integration between the router, the query cache, and the React tree.