router-query-integration

What problem does it solve?

Achieving instant navigation and eliminating data fetching waterfalls in Single Page Applications (SPAs) can be complex. This Skill provides patterns for integrating TanStack Router with TanStack Query for optimal performance.

Core Features & Use Cases

• Route Loader Prefetching: Use Router loaders to prefetch data with TanStack Query before navigation completes, ensuring instant perceived performance.
• Parallel Data Fetching: Run multiple queries in parallel within loaders to avoid request waterfalls.
• Type-Safe Integration: Leverage Query Options for maximum type safety and DRY configuration between loaders and components.
• Optimized Navigation: Implement hover preloading on links to fetch data even before a user clicks.
• Use Case: Configure a dashboard route to prefetch user data, statistics, and posts in parallel using Query loaders, ensuring all data is ready before the dashboard component renders.

Quick Start

Use the router-query-integration skill to set up a route loader that prefetches user data for /users/$id.