skills.rest
hashintel
hashintelOFFICIAL
Explore all skills by this author →
Website𝕏@hashaiGitHub

compositions-router-query

Integrate TanStack Router with TanStack Query for synchronized navigation and data caching.

7|Updated Mar 16, 2026
Search Tags:#react#routing#tanstack#ssr#react-query#data-caching
One-click install
npx skills add https://github.com/hashintel/brunch --skill compositions-router-query-hashintel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compositions-router-query
Source: https://github.com/hashintel/brunch/tree/main/.agents/skills/compositions-router-query
Command: npx skills add https://github.com/hashintel/brunch --skill compositions-router-query-hashintel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, @tanstack/react-router, @tanstack/react-router-ssr-query, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the coordination between TanStack Router and TanStack Query, enabling efficient data fetching, caching, and SSR hydration.

Core Features & Use Cases

  • Router and Query Synchronization: Coordinates navigation with data caching and prefetching in complex React applications.
  • SSR Support: Implements hydration and streaming for server-side rendering workflows.
  • Use Case: Developers can build highly performant web apps that load data efficiently during navigation and SSR, reducing load times and improving user experience.

Quick Start

Set up TanStack Query with React Router to manage data preloading and SSR hydration seamlessly in your React app.

Frequently Asked Questions about compositions-router-query

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

FAQPage Schema
How do I integrate TanStack Router with TanStack Query for data caching?▼

You integrate TanStack Router with TanStack Query by synchronizing navigation with data caching and prefetching. This setup ensures proper QueryClient management within router context for efficient data fetching in React applications.

What's the best way to set up SSR hydration with TanStack Router and React Query?▼

The best way to set up SSR hydration is configuring QueryClient within server-side rendering environments. This enables proper hydration and streaming for TanStack Router workflows, reducing load times and improving user experience.

Does TanStack Router support server-side rendering with React Query?▼

Yes, TanStack Router supports server-side rendering with React Query. The integration implements hydration and streaming for SSR workflows, ensuring data fetching efficiency and proper server-side hydration setup.

Can I synchronize React navigation with data prefetching using TanStack Query?▼

Yes, you can synchronize React navigation with data prefetching using TanStack Query. This integration coordinates navigation with data caching, enabling efficient preloading during route transitions in complex React applications.

Why does my React app need QueryClient configured in router context for SSR?▼

Your React app needs QueryClient configured in router context to enable proper server-side hydration. This setup ensures optimal performance by coordinating data fetching efficiency and supporting SSR environments.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
Bonny94ITABonny94ITA

performance

Audit website performance with Lighthouse and suggest code-level optimizations.

Community
Advanced
cenjiecenjie

tanstack-integration-best-practices

Integrate TanStack Query with TanStack Router for SSR-safe data fetching and caching.

Community
Advanced
MinhDuyDEVMinhDuyDEV

tanstack-query

Implement TanStack Query v5 data fetching, caching, and mutation patterns for React.

Community
Advanced