skills.rest
thongdn-it
thongdn-itCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-query

Optimize TanStack Query v5 usage in React apps with key hierarchies and caching defaults.

3|1|Updated Jan 27, 2026
Search Tags:#caching#tanstack#query#react-query#prefetch#data-fetching#invalidations
One-click install
npx skills add https://github.com/thongdn-it/react-agent-skills --skill tanstack-query-thongdn-it
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/thongdn-it/react-agent-skills/tree/main/skills/tanstack-query
Command: npx skills add https://github.com/thongdn-it/react-agent-skills --skill tanstack-query-thongdn-it

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides a comprehensive guide to optimizing TanStack Query v5 usage in React apps, helping teams reduce refetch storms, improve cache efficiency, and enable scalable data patterns.

Core Features & Use Cases

  • Establishes robust query key hierarchies and global defaults for queries and mutations.
  • Covers prefetching, invalidation, suspense integration, and render optimizations across real-world data-heavy UIs.
  • Demonstrates patterns for useQuery, useMutation, queryClient, and server-component data hydration in production apps.

Quick Start

Audit your TanStack Query usage across the codebase and apply the recommended patterns to improve caching, invalidation, and data fetching performance.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I structure TanStack Query keys to prevent caching conflicts in React?▼

To prevent caching conflicts, structure TanStack Query keys using type-safe key factories with hierarchical arrays, enabling granular cache invalidation and accurate data matching across your React components.

What's the best way to stop refetch storms when fetching data with React Query?▼

To stop refetch storms, apply global sensible defaults for caching configuration and implement strategic prefetching patterns across useQuery, ensuring optimal cache efficiency and reducing redundant network requests.

Can I use TanStack Query for server component data hydration in production apps?▼

Yes, you can use TanStack Query for server-component data hydration in production apps by applying specific patterns to hydrate queryClient state on the client seamlessly without breaking suspense integration.

How do I invalidate queries granularly after a useMutation in TanStack Query?▼

To invalidate queries granularly after a useMutation, leverage hierarchical query key structures with queryClient to target specific cache entries precisely, avoiding broad cache resets and unnecessary refetching.

Does TanStack Query v5 integrate with suspense for render optimizations?▼

Yes, TanStack Query v5 integrates with suspense for render optimizations across data-heavy UIs, allowing components to suspend while fetching and improving user experience during asynchronous data loading.

Related Skills

Explore More Software Engineering Skills→
RepairYourTechRepairYourTech
6

tanstack-query

Manage React server state with TanStack Query v5 data fetching and caching.

Community
Advanced
danghungtb26danghungtb26
3

tanstack-table-guide

Implement TanStack Table data tables with sorting, filtering, pagination, and row selection in React.

Community
Intermediate
officechbusinessservices-creatorofficechbusinessservices-creator

frontend-patterns

Standardize React and Next.js frontend design patterns for components and state management.

Community
Intermediate
tenequmtenequm
32

tanstack-query

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

Community
Advanced