TanStack Router & Query Integration

关于

This skill provides Claude with advanced implementation patterns for combining TanStack Router and TanStack Query to build high-performance React applications. It focuses on using route loaders to prefetch data before navigation completes, effectively eliminating request waterfalls and providing users with near-instant page transitions. It covers essential best practices including the Query Options pattern for type safety, parallel fetching for complex dashboards, error boundary integration, and intent-based preloading to maximize perceived performance.

主要功能

• Type-safe Query Options implementation for DRY code
• Synchronized search parameter and query state management
• Parallel and dependent query orchestration in loaders
• Route loader prefetching using ensureQueryData
• 0 GitHub stars
• Intent-based route preloading on link hover

使用场景

• Building high-performance SPAs with zero-latency navigation transitions.
• Implementing standardized, type-safe data fetching patterns across large React codebases.
• Eliminating nested loading states and waterfalls in complex data-driven dashboards.