skills.rest
rezics
rezicsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

router-core/data-loading

Centralize TanStack Router route data loading with loaders and caching.

6|1|Updated Jun 1, 2025
Search Tags:#typescript#cache#router#data-loading#loader#deferred-data#loaderDeps
One-click install
npx skills add https://github.com/rezics/rezics --skill router-core-data-loading-rezics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/data-loading
Source: https://github.com/rezics/rezics/tree/main/.agents/skills/tanstack/router/router-core/data-loading
Command: npx skills add https://github.com/rezics/rezics --skill router-core-data-loading-rezics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Route data loading is complex and error-prone; this skill centralizes loader-based data fetching, caching, and lifecycle management for TanStack Router.

Core Features & Use Cases

  • Loader-based data fetching with loaderDeps for cache keys
  • Built-in caching controls: staleTime, preloadStaleTime, gcTime
  • Pending state support via pendingComponent, pendingMs, pendingMinMs
  • Context and beforeLoad for per-route data injection
  • Deferred data loading with Await
  • Route invalidation and error handling with router.invalidate and errorComponent

Quick Start

Configure a route with a loader, then access loader data via Route.useLoaderData in your 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 centralize route data loading and caching in a TypeScript SPA?▼

Route data loading is centralized by configuring per-route loader hooks with loaderDeps for cache keys, enabling built-in caching controls like staleTime and gcTime to manage fetch logic across your SPA.

How does deferred data loading work with pending states in TanStack Router?▼

Deferred data loading works by configuring pendingComponent with pendingMs and pendingMinMs to render fallback UI, then resolving asynchronous promises via the Await component to stream data into your route.

Can I inject per-route context before loading data in a client-side router?▼

Yes, per-route context is injected using the beforeLoad integration alongside createRootRouteWithContext, allowing you to pass dependencies and authentication data into your loader hooks before fetching.

What is the best way to handle route invalidation and error boundaries for loaders?▼

Route invalidation and error boundaries are handled by calling router.invalidate to refresh stale data, while configuring errorComponent on your route to catch and display loader fetch failures gracefully.

Does this data loading approach work without external cache dependencies?▼

Yes, the data loading approach operates without external dependencies, utilizing built-in cache controls like preloadStaleTime and gcTime directly within the TypeScript router lifecycle to manage fetch persistence.

Related Skills

Explore More Software Engineering Skills→
jezwebjezweb
961

TanStack Router

Generate typed file-based routes with TanStack Router for React SPAs.

Community
Intermediate
ProfFroggoProfFroggo
1

mission-control-coding-standards

Enforce Mission Control coding standards for TypeScript modules using the src/modules pattern.

Community
Intermediate
archyl-comarchyl-com
1

archyl-review

Analyze code changes against Archyl's C4 model and conformance rules.

Official
Advanced
abereghiciabereghici

router-core/data-loading

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

Community
Advanced