skills.rest
abereghici
abereghiciCOMMUNITY
Explore all skills by this author →
Website𝕏@alexandrubrgGitHub

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
One-click install
npx skills add https://github.com/abereghici/skills --skill router-core-data-loading-abereghici
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
lespacemanlespaceman
4

router-core/data-loading

Coordinate TanStack Router route data loading with parameter-aware caching and preloading.

Community
Intermediate
tenequmtenequm
32

tanstack-query

Manage React server-state with TanStack Query queries, mutations, and caching.

Community
Advanced
webdevcodywebdevcody
22

add-skeleton-loaders

Add layout-matching shadcn skeleton placeholders to TanStack Start routes with async data fetching.

Community
Intermediate
evolv3aievolv3ai
3

TanStack Router

Build type-safe, file-based React routing with TanStack Router.

Community
Intermediate