skills.rest
oscartejera
oscartejeraCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Manages server state in React apps with TanStack Query v5 including advanced patterns and v4-to-v5 migrations.

Updated Aug 27, 2026
Search Tags:#typescript#state management#react#data fetching#api integration#tanstack query
One-click install
npx skills add https://github.com/oscartejera/josephine-app --skill tanstack-query-oscartejera
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/oscartejera/josephine-app/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/oscartejera/josephine-app --skill tanstack-query-oscartejera

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps developers efficiently manage server state in React applications, simplifying data fetching, caching, and synchronization, and resolving complex migration issues from v4 to v5.

Core Features & Use Cases

  • Data Fetching & Caching: Streamlines fetching, caching, and updating server data in React.
  • Migration Assistance: Provides guidance and fixes for migrating from TanStack Query v4 to v5, addressing breaking changes like object syntax, renamed options, and status flag changes.
  • Advanced Patterns: Covers optimistic updates, infinite queries, error handling with throwOnError, and offline support.
  • Use Case: A developer is upgrading a React app to TanStack Query v5 and encountering numerous errors related to syntax changes and removed features. They use this Skill to understand the breaking changes, apply the correct v5 patterns, and ensure their data fetching logic is robust and performant.

Quick Start

Use the tanstack-query skill to understand the object syntax requirement for v5 useQuery.

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 data fetching logic from TanStack Query v4 to v5?▼

Migrating from TanStack Query v4 to v5 requires adopting object syntax for useQuery, replacing keepPreviousData, updating status flags like isPending, and renaming cacheTime to gcTime. This Skill provides targeted fixes for these breaking changes.

How do I implement optimistic updates with useMutationState in React?▼

Optimistic updates in React use useMutationState to track mutation status across components and apply temporary cache changes before server confirmation. This Skill covers advanced patterns for synchronizing server state during these mutations.

Why does my React useQuery return undefined data during SSR hydration?▼

React SSR hydration issues with useQuery often stem from streaming server components or mismatched query states. This Skill helps debug server state synchronization by addressing hydration streaming and network mode configurations.

Does TanStack Query v5 support offline mode for React PWA applications?▼

TanStack Query v5 supports offline mode for React PWA applications through configurable network modes. This Skill explains how to manage server state caching and synchronization when network connectivity is interrupted.

What is the correct object syntax for useQuery in TanStack Query v5?▼

The correct object syntax for useQuery in TanStack Query v5 requires passing an object containing the queryKey and queryFn properties directly. This Skill guides developers through the mandatory syntax changes from v4.

How do I handle API errors with throwOnError in React server state?▼

Handling API errors with throwOnError in React server state allows query failures to propagate to error boundaries. This Skill details error handling strategies alongside infiniteQueryOptions for paginated data.

Related Skills

Explore More Software Engineering Skills→
HouseGarofaloHouseGarofalo
3

react-typescript

Develop React applications with TypeScript for type-safe components and state management.

Official
Intermediate
EthanALXEthanALX

React API Layer Architecture

Standardize React data fetching with centralized HTTP clients and typed hooks.

Community
Advanced
cole-robertsoncole-robertson
36

inertia-rails-forms

Build Inertia Rails forms with useForm for state, validation, and file uploads.

Community
Basic
AngelP17AngelP17
1

react-state-management

Implement React state management patterns with Redux Toolkit, Zustand, Jotai, and React Query.

Community
Intermediate