router-query-integration

The Router × Query Integration skill is a professional-grade workflow component designed for React developers building high-performance Single Page Applications (SPAs). This skill addresses the critical challenge of eliminating request waterfalls and improving perceived performance during route transitions by synchronizing route-level data fetching with global query state management. It is primarily intended for teams using TanStack Router and TanStack Query who require a standardized, type-safe approach to data orchestration. By utilizing route loaders to initiate data fetching before the component tree renders, users can ensure that navigation feels instantaneous while maintaining the benefits of cache deduplication and stale-while-revalidate patterns. The skill covers various implementation strategies, ranging from simple query prefetching to complex dependent requests and parallel loading, ensuring robust error handling through integration with router-level error boundaries and suspense components.

• Implements route-level data prefetching using ensureQueryData, prefetchQuery, and fetchQuery patterns.

• Facilitates parallel data loading using Promise.all within route loaders to maximize throughput during navigation.

• Enforces type safety and code reuse through the Query Options pattern (queryOptions).

• Manages dependent queries where subsequent data requests rely on previously resolved loader data.

• Provides patterns for manual cache invalidation following mutations to keep UI states synchronized with the server.

• Supports development-time debugging by facilitating the auto-hydration of DevTools for both the Router and Query Client.

• Inputs include React route definitions, existing TanStack Query clients, and API service functions for data fetching.

• Outputs consist of optimized loader configurations and patterns for query integration that minimize request latency.

• Developers should define query keys centrally to ensure cache consistency across the application.

• Use ensureQueryData when data is critical for the page render to prevent unnecessary re-fetches.

• Leverage staleTime configurations to balance freshness requirements with network performance.

• Always pair route-level loaders with appropriate React Query hooks in the component layer to maintain access to real-time data states and background refetching capabilities.