router-query-integration

Eliminate waterfalls by integrating TanStack Router loaders with TanStack Query to prefetch data before navigation completes. Use queryClient.ensureQueryData in route loaders to run multiple queries in parallel, ensuring all data loads simultaneously rather than sequentially.

Yes. Implement hover preloading by triggering prefetchQuery or fetchQuery in link event handlers before navigation occurs. TanStack Query caches the result, so when the user navigates, the data is instantly available from cache.

Use Query Options to define type-safe query configurations once, then reuse them in both route loaders and components. This approach maintains consistency, enables DevTools integration, and prevents type mismatches between loader prefetching and component queries.

Run multiple queries in parallel within loaders using Promise.all or TanStack Query's batch utilities to fetch related data—like user details, statistics, and posts—simultaneously. This prevents sequential request chains and ensures instant perceived performance.

Yes. TanStack Router loaders integrate directly with TanStack Query through queryClient methods like ensureQueryData and prefetchQuery. This pattern applies specifically to SPAs where loader-based prefetching and cache deduplication optimize navigation performance.

Use route loader prefetching to eliminate loading states during navigation and avoid waterfalls. Fetch in components when data is optional or user-specific. Loaders ensure critical data is ready before render, improving perceived performance in SPAs.