router-core/data-loading

Configure TanStack Router route loaders with loaderDeps cache keys and caching controls.

Updated Apr 2, 2026

Search Tags:#caching #tanstack #router #data-loading #loader #loaderDeps

Ready to run

npx skills add https://github.com/abereghici/skills --skill router-core-data-loading-abereghici

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: router-core/data-loading
Source: https://github.com/abereghici/skills/tree/main/skills/tanstack-router/data-loading
Command: npx skills add https://github.com/abereghici/skills --skill router-core-data-loading-abereghici

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide explains client-side data-loading orchestration for TanStack Router routes, including loader usage, loaderDeps for cache keys, and caching strategies to keep UIs responsive.

Core Features & Use Cases

Loader-based data fetching for routes with support for loaderDeps-driven cache keys.
Caching controls via staleTime and gcTime, plus optional preloading and deferred loading patterns.
Pending states, error handling, and beforeLoad/context-driven data injection to stabilize UX across navigations.
Patterns for invalidation, deferred data, and router context integration to coordinate data across the tree.

Quick Start

Define a route with a loader to fetch data and render it in a component.

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 load data for routes in TanStack Router?▼

You can load data for routes in TanStack Router by defining a loader function on your route. This loader fetches the necessary data and passes it to the route component for rendering, keeping your UI responsive.

What is loaderDeps used for in TanStack Router?▼

loaderDeps is used in TanStack Router to create cache keys for your route loaders. By defining dependencies, you control when cached data is reused or refreshed, ensuring predictable UI updates across navigations.

How do I cache route data and control staleness in TanStack Router?▼

TanStack Router caches route data using staleTime and gcTime properties. staleTime determines how long data is considered fresh, while gcTime controls how long it remains in memory before garbage collection.

Can I preload data before navigating to a route in TanStack Router?▼

Yes, TanStack Router supports optional preloading and deferred loading patterns. Preloading fetches route data before navigation completes, reducing wait times and stabilizing the user experience during transitions.

How do I handle errors and pending states during route data loading?▼

TanStack Router handles errors and pending states during data loading through built-in mechanism. You can use beforeLoad and context-driven data injection to manage error boundaries and display pending UI while loaders resolve.

Do I need a specific TanStack Router environment to use loaders and caching?▼

Yes, using loaders, loaderDeps, and caching requires a TanStack Router environment that supports staleTime, gcTime, beforeLoad, and context. This setup enables full data-loading orchestration across your application routes.