skills.rest
sutin1234
sutin1234COMMUNITY
Explore all skills by this author →
Website𝕏@injitt_sutinGitHub

tanstack-query-best-practices

Audit TanStack Query data fetching and caching for stale data inconsistencies.

Updated Feb 8, 2026
Search Tags:#caching#mutations#ssr#invalidation#tanstack-query#server-state#react-query-patterns
One-click install
npx skills add https://github.com/sutin1234/tanstack-start-agent-skills --skill tanstack-query-best-practices-sutin1234
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/sutin1234/tanstack-start-agent-skills/tree/main/.agents/skills/tanstack-query-best-practices
Command: npx skills add https://github.com/sutin1234/tanstack-start-agent-skills --skill tanstack-query-best-practices-sutin1234

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query best practices provide a structured, battle-tested approach to data fetching, caching, and server-state management in React applications, reducing bugs from mismatched keys, stale data, and brittle mutations.

Core Features & Use Cases

  • Guidance on query key design, caching strategies, and targeted invalidation to ensure data consistency and performance.
  • SSR hydration, prefetching, and parallel queries patterns to scale data loading in large apps.
  • Standardized mutation handling, error boundaries, and retry behaviors to improve UX and reliability.

Quick Start

Audit your current TanStack Query usage and apply key hierarchies, caching goals, and mutation patterns step by step.

Frequently Asked Questions about tanstack-query-best-practices

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

FAQPage Schema
How do I structure TanStack Query keys to avoid stale data and caching inconsistencies?▼

Use hierarchical query key arrays for TanStack Query to enable precise invalidation and prevent stale data. Structured keys allow you to target specific queries during mutations, ensuring cache consistency across your React components.

What is the best way to handle TanStack Query mutations and invalidation in production?▼

Handle TanStack Query mutations by applying targeted cache invalidation and standardized mutation workflows. Combine these with error boundaries and retry behaviors to maintain data consistency and improve application reliability during server-state updates.

How do I configure staleTime and cacheTime in React Query for optimal performance?▼

Configure staleTime and cacheTime by setting sensible caching goals tailored to your data fetching needs. This structured strategy ensures optimal performance by balancing data freshness with reduced network requests, preventing stale data across your app.

How do I implement SSR hydration and prefetching with TanStack Query?▼

Implement SSR hydration and prefetching with TanStack Query by applying structured patterns to scale data loading in large apps. This approach supports parallel queries and ensures your server-state is properly hydrated on the client without mismatches.

Related Skills

Explore More Software Engineering Skills→
mohamed-g-shoaibmohamed-g-shoaib

tanstack-query-best-practices

Standardize TanStack Query usage in React apps with structured rules for caching and invalidation.

Community
Advanced
Trio-Blockchain-LabsTrio-Blockchain-Labs

vercel-react-best-practices

Apply React and Next.js performance best practices across component design, data fetching, and code reviews.

Official
Advanced
pedronauckpedronauck
567

react

Guides React development with best practices for component architecture, state management, and TypeScript integration.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

tanstack-query-best-practices

Structure TanStack Query data fetching, caching, and server state in React applications.

Community
Advanced