skills.rest
greyhaven-ai
greyhaven-aiCOMMUNITY
Explore all skills by this author →
Website𝕏@GreyHavenAIGitHub

grey-haven-tanstack-patterns

Standardize TanStack Start, Router, and Query patterns in React 19 applications.

29|4|Updated Aug 10, 2025
One-click install
npx skills add https://github.com/greyhaven-ai/claude-code-config --skill grey-haven-tanstack-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: grey-haven-tanstack-patterns
Source: https://github.com/greyhaven-ai/claude-code-config/tree/main/grey-haven-plugins/research/skills/tanstack-patterns
Command: npx skills add https://github.com/greyhaven-ai/claude-code-config --skill grey-haven-tanstack-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the complexity of setting up TanStack Start applications by providing battle-tested patterns for routing, data fetching, and multi-tenant architecture.

Core Features & Use Cases

  • File-Based Routing: Type-safe routing with automatic layout nesting and protected routes.
  • Optimized Data Fetching: Smart caching with 1-minute stale times and automatic query invalidation.
  • Use Case: Imagine you're building a dashboard application. Use this Skill to automatically set up protected routes, server-side data loading, and real-time cache management.

Quick Start

When building a new TanStack Start application, apply the file-based routing structure with protected layouts and implement the standard query caching strategy.

Frequently Asked Questions about grey-haven-tanstack-patterns

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

FAQPage Schema
How do I set up file-based routing in TanStack Start applications?▼

File-based routing in TanStack Start automatically generates type-safe routes from your directory structure. Define your route files following TanStack's file convention, and the framework handles automatic layout nesting and parameter extraction without manual configuration.

What's the best way to handle multi-tenant data access in TanStack Query?▼

Propagate tenant_id through server functions and include it in query keys to isolate cached data per tenant. This ensures each tenant's data remains separate and prevents cross-tenant leaks when users switch contexts.

How do I implement cache invalidation after mutations in TanStack?▼

After mutations complete, invalidate affected query keys to trigger automatic refetching. TanStack Query will refetch data with the invalidated keys, keeping your UI in sync with server state without manual cache clearing.

Can I use TanStack Router and Query together with server functions?▼

Yes. TanStack Router handles navigation and loaders, Query manages server-side data fetching, and server functions execute on the server securely. Combined, they create a cohesive full-stack data layer for React 19 applications.

What stale time settings should I use for TanStack Query in React applications?▼

TanStack patterns recommend 1-minute stale times as a sensible default for most dashboard and application data. This balances keeping cached data fresh while reducing unnecessary network requests during typical user interactions.

Do I need type-safe route parameters when using TanStack Router?▼

Type-safe route parameters are enforced to prevent routing errors and enable IDE autocomplete. TanStack Router generates types from your file structure, catching parameter mismatches at compile time rather than runtime.

Related Skills

Explore More Software Engineering Skills→
AmbitionsXXXVAmbitionsXXXV
2

tanstack-router

Implement type-safe file-based routing for React SPAs with TanStack Router.

Community
Advanced
kristofferaaskristofferaas

tanstack-integration-best-practices

Integrates TanStack Query, Router, and Monaco for efficient web development workflows.

Community
Advanced
RajAryanIITBHURajAryanIITBHU

clerk-tanstack-patterns

Protect TanStack React Start routes and server functions with Clerk authentication.

Community
Intermediate
ataschzataschz
18

TanStack Router

Create type-safe file-based routing for React apps with TanStack Router.

Community
Advanced