skills.rest
agusmdev
agusmdevCOMMUNITY
Explore all skills by this author →
Website𝕏@agusmdevGitHub

tanstack-react-query-setup

Configure TanStack Query with QueryClient, provider, and devtools for SSR TanStack Start and SPA TanStack Router projects.

5|Updated Feb 12, 2026
Search Tags:#tanstack#devtools#ssr#react-query#tanstack-router#tanstack-start#query-client
One-click install
npx skills add https://github.com/agusmdev/fullstack-ai-template --skill tanstack-react-query-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-react-query-setup
Source: https://github.com/agusmdev/fullstack-ai-template/tree/main/.claude/skills/tanstack-react-query-setup
Command: npx skills add https://github.com/agusmdev/fullstack-ai-template --skill tanstack-react-query-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Configure TanStack Query with a ready-to-use QueryClient, provider, and devtools across SSR TanStack Start and SPA TanStack Router projects.

Core Features & Use Cases

  • Centralized QueryClient configuration with sensible default options for queries and mutations
  • SSR compatibility for TanStack Start and client-side support for TanStack Router
  • Provider integration and devtools support for debugging and performance tuning

Quick Start

Install the core TanStack Query packages and wire up a QueryProvider in your app to enable data fetching with caching.

Frequently Asked Questions about tanstack-react-query-setup

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

FAQPage Schema
How do I set up TanStack Query with SSR in TanStack Start?▼

To set up TanStack Query with SSR in TanStack Start, configure a centralized QueryClient with default options, integrate the provider, and wire up devtools to ensure consistent server-side and client-side data fetching.

What is the best way to configure a QueryClient and provider for TanStack Router?▼

Configuring a QueryClient and provider for TanStack Router involves establishing a centralized setup with sensible default options for queries and mutations, ensuring high-performance data fetching alongside integrated devtools for debugging.

Does TanStack Query work with both SPA and SSR applications?▼

TanStack Query works with both SPA and SSR applications by providing specific compatibility for TanStack Start SSR and client-side support for TanStack Router, handling installation, configuration, and provider integration across both environments.

How do I add TanStack Query devtools to my React project?▼

Adding TanStack Query devtools to a React project requires wiring them up during the provider integration phase, which streamlines data management by providing tooling for debugging and performance tuning of queries and mutations.

Why do I need to configure default options for my QueryClient?▼

Configuring default options for a QueryClient establishes consistent query patterns and error handling across an application, preventing mismanaged data fetching and ensuring high-performance caching behavior.

Related Skills

Explore More Software Engineering Skills→
patricio0312revpatricio0312rev
5

tanstack-query-setup

Set up TanStack Query to manage server state in React apps.

Community
Advanced
TomytoolTomytool

tanstack-query-best-practices

Implement TanStack Query best practices for data fetching, caching, and mutations in React.

Community
Advanced
cenjiecenjie

tanstack-integration-best-practices

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

Community
Advanced
VoTruongDanhVoTruongDanh

state-management-expert

Guide React state management choices across Redux, Zustand, TanStack Query, and Context API.

Community
Advanced