tanstack-query

Guide React server state management with TanStack Query v5.

52|6|Updated Nov 24, 2025
One-click install
npx skills add https://github.com/ovachiever/droid-tings --skill tanstack-query-ovachiever
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/ovachiever/droid-tings/tree/main/skills/tanstack-query
Command: npx skills add https://github.com/ovachiever/droid-tings --skill tanstack-query-ovachiever

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Learn TanStack Query v5 for reliable server state management in React apps, including useQuery, useMutation, caching strategies, and v4-to-v5 migrations.

Core Features & Use Cases

  • ✅ Object syntax for useQuery/useMutation
  • ✅ queryOptions factory for reusable configs
  • ✅ Cache management with gcTime
  • ✅ Migration guidance for v4 to v5
  • ✅ DevTools and testing patterns

Quick Start

Install TanStack Query, wrap your app with QueryClientProvider, and begin fetching data with useQuery({ queryKey, queryFn }).

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I manage server state in React with TanStack Query v5?

TanStack Query v5 manages server state through useQuery for fetching data and useMutation for updates. Wrap your app with QueryClientProvider, then call useQuery({ queryKey, queryFn }) to fetch and automatically cache responses. The library handles synchronization, background refetching, and stale-data management without manual Redux or Context boilerplate.

What's the difference between gcTime and staleTime in TanStack Query?

staleTime controls how long cached data is considered fresh; queries return immediately without refetching during this window. gcTime (formerly cacheTime) determines how long unused cached data persists in memory before garbage collection. Set staleTime to reduce network requests and gcTime higher to preserve data across component unmounts.

How do I migrate from React Query v4 to TanStack Query v5?

TanStack Query v5 migration replaces cacheTime with gcTime, adopts object syntax for useQuery and useMutation, and introduces queryOptions factories for reusable configurations. Use migration codemods to automate renaming, then refactor hooks to leverage the new patterns. Dependencies remain the same; the upgrade is primarily API and naming changes.

Can I use TanStack Query for optimistic updates and infinite queries?

Yes. TanStack Query v5 supports optimistic updates through useMutation's onMutate callback to update cache before the server responds. Infinite queries use useInfiniteQuery with a getNextPageParam function to paginate through results, automatically managing page state and combining responses into a single queryKey.

How should I handle errors and retry logic in TanStack Query mutations?

Configure retry count and delay in QueryClient or per-mutation. useMutation automatically retries failed requests based on these settings. Capture errors in the onError callback to display user feedback. Use throwOnError to control whether mutations throw or silently fail, and combine with error boundaries for granular error handling.

What's the best way to structure reusable query configurations in v5?

Use queryOptions factory to define queryKey, queryFn, staleTime, and gcTime in one place, then pass the result to useQuery. This centralizes configuration, improves type safety, and makes queries reusable across components. DevTools integration automatically logs all query activity for debugging cache and fetch behavior.