router-query-integration

Name: router-query-integration
Availability: InStock
Author: MadAppGang

Integrate TanStack Router loaders with TanStack Query for prefetching.

278|29|Updated Nov 4, 2025

Search Tags:#performance #frontend #data fetching #navigation #TanStack Query #TanStack Router #loaders #SPA

Ready to run

npx skills add https://github.com/MadAppGang/claude-code --skill router-query-integration

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: router-query-integration
Source: https://github.com/MadAppGang/claude-code/tree/main/plugins/frontend/skills/router-query-integration
Command: npx skills add https://github.com/MadAppGang/claude-code --skill router-query-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about router-query-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I eliminate data fetching waterfalls when navigating between routes?▼

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.

Can I prefetch data on hover before a user clicks a link?▼

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.

How do I keep data fetching type-safe across route loaders and components?▼

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.

What's the best way to run multiple data requests in parallel within a route loader?▼

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.

Does TanStack Query work with SPA route loaders?▼

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.

When should I use route loader prefetching instead of fetching data in components?▼

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.