Verwendung
- Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
- Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
- Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/deckardger/tanstack-agent-skills --skill tanstack-integration-best-practicesVor dem Start
- Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
- Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument
Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.
TanStack Integration Best Practices
Guidelines for integrating TanStack Query, Router, and Start together effectively. These patterns ensure optimal data flow, caching coordination, and type safety across the stack.
When to Apply
- Setting up a new TanStack Start project
- Integrating TanStack Query with TanStack Router
- Configuring SSR with query hydration
- Coordinating caching between router and query
- Setting up type-safe data fetching patterns
Rule Categories by Priority
| Priority | Category | Rules | Impact |
|---|---|---|---|
| CRITICAL | Setup | 3 rules | Foundational configuration |
| CRITICAL | SSR Integration | 1 rule | Router + Query SSR setup |
| HIGH | Data Flow | 4 rules | Correct data fetching patterns |
| MEDIUM | Caching | 3 rules | Performance optimization |
| MEDIUM | SSR | 2 rules | Additional SSR patterns |
Quick Reference
Setup (Prefix: setup-)
setup-query-client-context— Pass QueryClient through router contextsetup-provider-wrapping— Correctly wrap with QueryClientProvidersetup-stale-time-coordination— Coordinate staleTime between router and query
Data Flow (Prefix: flow-)
flow-loader-query-pattern— Use loaders with ensureQueryDataflow-suspense-query-component— Use useSuspenseQuery in componentsflow-mutations-invalidation— Coordinate mutations with query invalidationflow-server-functions-queries— Use server functions for query functions
Caching (Prefix: cache-)
cache-single-source— Let TanStack Query manage cachingcache-preload-coordination— Coordinate preloading between router and querycache-invalidation-patterns— Unified invalidation patterns
SSR Integration (Prefix: ssr-)
ssr-dehydrate-hydrate— Use setupRouterSsrQueryIntegration for automatic SSR
Additional SSR (Prefix: ssr-)
ssr-per-request-client— Create QueryClient per requestssr-streaming-queries— Handle streaming with queries
How to Use
Each rule file in the rules/ directory contains:
- Explanation — Why this pattern matters
- Bad Example — Anti-pattern to avoid
- Good Example — Recommended implementation
- Context — When to apply or skip this rule
Full Reference
See individual rule files in rules/ directory for detailed guidance and code examples.
