skills.rest
pakomercado0517
pakomercado0517COMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Migrate TanStack Query v4 to v5 with object syntax and gcTime.

1|Updated Jan 6, 2026
Search Tags:#tanstack#migration#react-query#server-state#useQuery#useMutation#v5
One-click install
npx skills add https://github.com/pakomercado0517/tresa-contaflow-web --skill tanstack-query-pakomercado0517
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/pakomercado0517/tresa-contaflow-web/tree/main/.cursor/skills/tanstack-query
Command: npx skills add https://github.com/pakomercado0517/tresa-contaflow-web --skill tanstack-query-pakomercado0517

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Migrating from TanStack Query v4 to v5 and implementing modern server-state patterns in React can be error-prone without a clear guide. This Skill consolidates migration steps, best practices, and practical examples to help teams adopt v5 features such as isPending, gcTime, placeholderData, networkMode, and infiniteQueryOptions, while preserving type safety and performance.

Core Features & Use Cases

  • Migration guidance from v4 to v5, including object syntax enforcement, updated typings, and hydration strategies.
  • Reusable query option factories (queryOptions) for useQuery, useSuspenseQuery, and prefetchQuery.
  • Common patterns: dependent queries, parallel queries, infinite queries, optimistic updates, and prefetching.
  • SSR hydration troubleshooting, error handling strategies, and DevTools integration for debugging.

Quick Start

Install @tanstack/react-query, initialize a single QueryClient with v5 defaults, wrap your app in QueryClientProvider, and consult the SKILL.md for migration steps and references.

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 from v4 to v5 object syntax?▼

Migrating React Query to v5 requires enforcing object syntax for hooks, replacing cacheTime with gcTime, and moving callbacks to useEffect. You must also update typings and hydration strategies to align with the new server-state patterns.

What is the best way to structure type-safe query options in TanStack Query v5?▼

Type-safe query options in TanStack Query v5 are best structured using queryOptions factories. These factories enable seamless integration with useQuery, useSuspenseQuery, and prefetchQuery while preserving full type safety across your data fetching logic.

How do I fix SSR hydration errors when using TanStack Query?▼

Fixing SSR hydration errors in TanStack Query involves updating your hydration strategies for v5. You must initialize a single QueryClient with v5 defaults and properly manage server-state hydration to prevent mismatches during server-side rendering.

Why should I use gcTime instead of cacheTime in TanStack Query v5?▼

You should use gcTime instead of cacheTime in TanStack Query v5 because the API was renamed to better reflect garbage collection behavior. This change clarifies that the configuration manages inactive query data removal rather than a generic cache duration.

How do I handle optimistic updates and infinite queries with useMutation in React Query?▼

Handle optimistic updates and infinite queries in React Query by utilizing useMutation alongside infiniteQueryOptions. This combination supports robust server-state patterns for dynamic data fetching and offline networkMode edge-case handling.

Does TanStack Query v5 work with offline networkMode and dependent queries?▼

TanStack Query v5 fully supports offline networkMode and dependent queries. It provides specific patterns for managing server-state when network connectivity drops and allows parallel query execution based on dynamic data dependencies.

Related Skills

Explore More Software Engineering Skills→
buisihung11buisihung11

tanstack-query

Configure TanStack Query v5 for React server state management.

Community
Advanced
MadAppGangMadAppGang
278

tanstack-query

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

Official
Intermediate
putto11262002putto11262002

data-fetching

Optimize server-side data fetching and caching in Next.js 16+ applications.

Community
Advanced
blencorpblencorp
101

tanstack-query

Fetch and manage server-state data with TanStack Query v5 hooks.

Official
Intermediate