tanstack-integration

Name: tanstack-integration
Author: DeckardGer

199stars18forks

How to install tanstack-integration?

deckardger/tanstack-agent-skills/tanstack-integration

$npx -y skills add DeckardGer/tanstack-agent-skills --skill tanstack-integration

Installs into the current project.

Summary

Best practices for integrating TanStack Query with TanStack Router and TanStack Start. Patterns for full-stack data flow, SSR, and caching coordination.

Files · 1

View on GitHub

SKILL.md

1	# TanStack Integration Best Practices
2
3	Guidelines for integrating TanStack Query, Router, and Start together effectively. These patterns ensure optimal data flow, caching coordination, and type safety across the stack.
4
5	## When to Apply
6
7	- Setting up a new TanStack Start project
8	- Integrating TanStack Query with TanStack Router
9	- Configuring SSR with query hydration
10	- Coordinating caching between router and query
11	- Setting up type-safe data fetching patterns
12
13	## Rule Categories by Priority
14
15	\| Priority \| Category \| Rules \| Impact \|
16	\|----------\|----------\|-------\|--------\|
17	\| CRITICAL \| Setup \| 3 rules \| Foundational configuration \|
18	\| CRITICAL \| SSR Integration \| 1 rule \| Router + Query SSR setup \|
19	\| HIGH \| Data Flow \| 4 rules \| Correct data fetching patterns \|
20	\| MEDIUM \| Caching \| 3 rules \| Performance optimization \|
21	\| MEDIUM \| SSR \| 2 rules \| Additional SSR patterns \|
22
23	## Quick Reference
24
25	### Setup (Prefix: `setup-`)
26
27	- `setup-query-client-context` — Pass QueryClient through router context
28	- `setup-provider-wrapping` — Correctly wrap with QueryClientProvider
29	- `setup-stale-time-coordination` — Coordinate staleTime between router and query
30
31	### Data Flow (Prefix: `flow-`)
32
33	- `flow-loader-query-pattern` — Use loaders with ensureQueryData
34	- `flow-suspense-query-component` — Use useSuspenseQuery in components
35	- `flow-mutations-invalidation` — Coordinate mutations with query invalidation
36	- `flow-server-functions-queries` — Use server functions for query functions
37
38	### Caching (Prefix: `cache-`)
39
40	- `cache-single-source` — Let TanStack Query manage caching
41	- `cache-preload-coordination` — Coordinate preloading between router and query
42	- `cache-invalidation-patterns` — Unified invalidation patterns
43
44	### SSR Integration (Prefix: `ssr-`)
45
46	- `ssr-dehydrate-hydrate` — Use setupRouterSsrQueryIntegration for automatic SSR
47
48	### Additional SSR (Prefix: `ssr-`)
49
50	- `ssr-per-request-client` — Create QueryClient per request
51	- `ssr-streaming-queries` — Handle streaming with queries
52
53	## How to Use
54
55	Each rule file in the `rules/` directory contains:
56	1. Explanation — Why this pattern matters
57	2. Bad Example — Anti-pattern to avoid
58	3. Good Example — Recommended implementation
59	4. Context — When to apply or skip this rule
60
61	## Full Reference
62
63	See individual rule files in `rules/` directory for detailed guidance and code examples.

People who liked this also viewed

6 picks

Type

tanstack-integration

199stars18forks

View on GitHub

How to install tanstack-integration?

deckardger/tanstack-agent-skills/tanstack-integration

$npx -y skills add DeckardGer/tanstack-agent-skills --skill tanstack-integration

Installs into the current project.

Summary

Best practices for integrating TanStack Query with TanStack Router and TanStack Start. Patterns for full-stack data flow, SSR, and caching coordination.

Files · 1

View on GitHub

SKILL.md

1	# TanStack Integration Best Practices
2
3	Guidelines for integrating TanStack Query, Router, and Start together effectively. These patterns ensure optimal data flow, caching coordination, and type safety across the stack.
4
5	## When to Apply
6
7	- Setting up a new TanStack Start project
8	- Integrating TanStack Query with TanStack Router
9	- Configuring SSR with query hydration
10	- Coordinating caching between router and query
11	- Setting up type-safe data fetching patterns
12
13	## Rule Categories by Priority
14
15	\| Priority \| Category \| Rules \| Impact \|
16	\|----------\|----------\|-------\|--------\|
17	\| CRITICAL \| Setup \| 3 rules \| Foundational configuration \|
18	\| CRITICAL \| SSR Integration \| 1 rule \| Router + Query SSR setup \|
19	\| HIGH \| Data Flow \| 4 rules \| Correct data fetching patterns \|
20	\| MEDIUM \| Caching \| 3 rules \| Performance optimization \|
21	\| MEDIUM \| SSR \| 2 rules \| Additional SSR patterns \|
22
23	## Quick Reference
24
25	### Setup (Prefix: `setup-`)
26
27	- `setup-query-client-context` — Pass QueryClient through router context
28	- `setup-provider-wrapping` — Correctly wrap with QueryClientProvider
29	- `setup-stale-time-coordination` — Coordinate staleTime between router and query
30
31	### Data Flow (Prefix: `flow-`)
32
33	- `flow-loader-query-pattern` — Use loaders with ensureQueryData
34	- `flow-suspense-query-component` — Use useSuspenseQuery in components
35	- `flow-mutations-invalidation` — Coordinate mutations with query invalidation
36	- `flow-server-functions-queries` — Use server functions for query functions
37
38	### Caching (Prefix: `cache-`)
39
40	- `cache-single-source` — Let TanStack Query manage caching
41	- `cache-preload-coordination` — Coordinate preloading between router and query
42	- `cache-invalidation-patterns` — Unified invalidation patterns
43
44	### SSR Integration (Prefix: `ssr-`)
45
46	- `ssr-dehydrate-hydrate` — Use setupRouterSsrQueryIntegration for automatic SSR
47
48	### Additional SSR (Prefix: `ssr-`)
49
50	- `ssr-per-request-client` — Create QueryClient per request
51	- `ssr-streaming-queries` — Handle streaming with queries
52
53	## How to Use
54
55	Each rule file in the `rules/` directory contains:
56	1. Explanation — Why this pattern matters
57	2. Bad Example — Anti-pattern to avoid
58	3. Good Example — Recommended implementation
59	4. Context — When to apply or skip this rule
60
61	## Full Reference
62
63	See individual rule files in `rules/` directory for detailed guidance and code examples.

People who liked this also viewed

6 picks

Type