skills.rest
hashabc-com
hashabc-comOFFICIAL
Explore all skills by this author →
GitHub

tanstack-query

Implement TanStack Query v5 in React applications with code examples.

Updated Aug 23, 2026
Search Tags:#caching#react#data fetching#tanstack query#server state#v5 migration
One-click install
npx skills add https://github.com/hashabc-com/taropay_sass_website --skill tanstack-query-hashabc-com
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/hashabc-com/taropay_sass_website/tree/main/.github/skills/tanstack-query
Command: npx skills add https://github.com/hashabc-com/taropay_sass_website --skill tanstack-query-hashabc-com

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and templates (resource) components.

What problem does it solve?

This Skill simplifies complex server state management in React applications, preventing common migration errors and optimizing data fetching performance.

Core Features & Use Cases

  • Data Fetching & Caching: Efficiently manage data fetching, caching, and synchronization using useQuery, useMutation, and useInfiniteQuery.
  • v4 to v5 Migration: Provides clear guidance and fixes for all breaking changes in TanStack Query v5, including object syntax, callback removal, and status renames.
  • Optimistic Updates: Implement instant UI feedback for mutations.
  • Use Case: You're migrating a React app from React Query v4 to v5 and encountering numerous TypeScript errors and unexpected behavior. This Skill helps you systematically address all breaking changes and implement v5 patterns correctly.

Quick Start

Use the tanstack-query skill to set up TanStack Query v5 in your React application.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I migrate React Query v4 to TanStack Query v5 without TypeScript errors?▼

Migrate to TanStack Query v5 by adopting object syntax for queries and mutations, removing callbacks, renaming query statuses, and replacing cacheTime with gcTime. This Skill systematically addresses all v5 breaking changes to fix TypeScript errors.

What is the correct way to set up data fetching and caching in React with TanStack Query?▼

Data fetching and caching in React with TanStack Query requires using useQuery, useMutation, and useInfiniteQuery hooks. These hooks manage server state synchronization, ensuring efficient data fetching and automatic cache updates.

How do I implement optimistic updates for mutations in a React application?▼

Implement optimistic updates for mutations in React by configuring useMutation to instantly update the UI before the server responds. This provides immediate user feedback while the actual data synchronization occurs in the background.

Does TanStack Query v5 replace cacheTime with gcTime for server state management?▼

Yes, TanStack Query v5 replaces the v4 cacheTime property with gcTime for server state management. This specific breaking change alters how garbage collection of inactive queries is configured.

Why are my TanStack Query v5 callbacks not working after upgrading?▼

TanStack Query v5 callbacks are not working because v5 removed direct callback properties from useQuery and useMutation. You must migrate to the new object syntax to handle side effects correctly.

Related Skills

Explore More Software Engineering Skills→
Yoriichi-DangYoriichi-Dang

tanstack-query

Manage React server state with TanStack Query v5 hooks.

Community
Advanced
mgd34msumgd34msu
4

tanstack-query

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

Community
Intermediate
aussiegingersnapaussiegingersnap
9

state-tanstack

Orchestrate React server and client state with Tanstack Query and Zustand.

Community
Intermediate
fyndxfyndx
1

native-data-fetching

Implement network requests and API data fetching in React Native apps.

Official
Intermediate