skills.rest
wanghaisheng
wanghaishengCOMMUNITY
Explore all skills by this author →
Website𝕏@edwin_uestcGitHub

tanstack-integration-best-practices

Define TanStack Query, Router, and Start integration patterns for SSR hydration.

10|1|Updated Dec 16, 2024
Search Tags:#tanstack#patterns#best-practices#ssr#react-query#hydration#react-router
One-click install
npx skills add https://github.com/wanghaisheng/cloudflare-workers-d1-r2-expo-turborepo-trpc-workflows-astro-cleark --skill tanstack-integration-best-practices-wanghaisheng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-integration-best-practices
Source: https://github.com/wanghaisheng/cloudflare-workers-d1-r2-expo-turborepo-trpc-workflows-astro-cleark/tree/main/ref/tanstack/tanstack-integration
Command: npx skills add https://github.com/wanghaisheng/cloudflare-workers-d1-r2-expo-turborepo-trpc-workflows-astro-cleark --skill tanstack-integration-best-practices-wanghaisheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes best-practice patterns for integrating TanStack Query, TanStack Router, and TanStack Start, enabling predictable data flow, SSR hydration, and centralized caching strategies.

Core Features & Use Cases

  • Provides a structured approach to coordinating data loading across loaders and client queries for full-stack apps.
  • Covers SSR hydration, per-request QueryClient management, and automatic state transfer between server and client.
  • Suitable for teams building applications with Expo/TanStack Start stacks or multiroot routing setups.

Quick Start

Configure a per-request router with a fresh QueryClient and enable SSR hydration across routes.

Frequently Asked Questions about tanstack-integration-best-practices

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

FAQPage Schema
How do I configure SSR hydration with TanStack Query and TanStack Router?▼

Configuring SSR hydration with TanStack Query requires using a fresh, per-request QueryClient on the server, fetching data via router loaders, and automatically dehydrating and hydrating that state for the client.

Why do I need a per-request QueryClient in TanStack Start?▼

A per-request QueryClient is required in TanStack Start to prevent cross-request data leakage and ensure predictable server-side data fetching before state dehydration and client hydration occur.

What is the best way to coordinate data loading across TanStack Router loaders and React Query?▼

The best way to coordinate data loading is applying loader-based patterns in TanStack Router to fetch data server-side, automatically syncing it into the TanStack Query cache during client hydration.

Can I use TanStack Start for multiroot routing setups with centralized caching?▼

Yes, TanStack Start supports multiroot routing setups and enables centralized caching strategies by coordinating TanStack Router and TanStack Query for predictable full-stack data flow.

Does TanStack Start work with Expo for full-stack app data loading?▼

Yes, TanStack Start integrates with Expo stacks to provide a structured approach for full-stack data loading, coordinating client queries and router loaders for predictable data flow.

How does state dehydration work in a TanStack Start SSR setup?▼

State dehydration in a TanStack Start SSR setup works by extracting the server-side TanStack Query cache state and automatically transferring it to the client to enable immediate hydration.

Related Skills

Explore More Software Engineering Skills→
wsimmondswsimmonds
109

nextjs-app-router-fundamentals

Migrate Next.js Pages Router projects to App Router conventions.

Community
Basic
tenequmtenequm
32

tanstack-query

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

Community
Advanced
MadAppGangMadAppGang
278

router-query-integration

Integrate TanStack Router loaders with TanStack Query for prefetching.

Official
Intermediate
Camilo8902Camilo8902

react-server-components

Implement React Server Components with Next.js App Router for data fetching and streaming.

Community
Advanced