router-core/data-loading

Standardize TanStack Router data loading with loaders, caching, and lifecycle hooks.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/cill-i-am/task-tracker --skill router-core-data-loading-cill-i-am
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: router-core/data-loading
Source: https://github.com/cill-i-am/task-tracker/tree/main/.agents/skills/tanstack-router-data-loading
Command: npx skills add https://github.com/cill-i-am/task-tracker --skill router-core-data-loading-cill-i-am

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data-loading for TanStack Router can be verbose and error-prone when implementing loader lifecycles, caching strategies, and error handling. This skill provides structured patterns and guidance to implement loader, loaderDeps, beforeLoad, and router.invalidate consistently across routes.

Core Features & Use Cases

  • Patterns for loader with context and dependencies
  • Caching configuration with staleTime, gcTime, preloadStaleTime
  • Deferred data loading and error handling
  • Router context propagation and beforeLoad context

Quick Start

Configure your router routes to load data using loader, loaderDeps, and beforeLoad as demonstrated.

Frequently Asked Questions about router-core/data-loading

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

FAQPage Schema
How do I manage TanStack Router data loading with loaderDeps and beforeLoad?

Deferred data loading in TanStack Router is handled by standardizing loader patterns and error handling. This approach manages asynchronous data fetching with appropriate lifecycle hooks to prevent blocking during navigation, ensuring pending states are handled gracefully.

What is the best way to configure staleTime and gcTime for route caching?

Router context propagation in TanStack Router is implemented through the beforeLoad hook. This mechanism standardizes the distribution of context and dependencies across routes, ensuring that loaders receive the necessary environment data before execution.

How do I handle deferred data loading and error handling in TanStack Router?

To invalidate data and refresh routes, you can use router.invalidate alongside standardized loader patterns. This combination ensures that cached data is appropriately refreshed and pending states are managed during application state changes.

Does this approach work with complex client-side apps using TanStack Router?

Standardizing route data loading prevents verbose and error-prone loader implementations. By providing structured patterns for caching, context propagation, and lifecycle hooks, it ensures consistent and maintainable data fetching across all application routes.