tanstack-query

Manage React server state with TanStack Query v5 patterns.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/remiconnesson/insights-garden --skill tanstack-query-remiconnesson
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/remiconnesson/insights-garden/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/remiconnesson/insights-garden --skill tanstack-query-remiconnesson

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

TanStack Query v5 takes the friction out of React server state by turning manual fetch, cache, loading, error, and mutation logic into predictable patterns. It is especially useful when a project needs to migrate from v4, fix hydration issues, or standardize data fetching across many components.

Core Features & Use Cases

  • Query and mutation patterns: Set up reusable queryOptions, mutations, invalidation, and optimistic UI updates.
  • Advanced React support: Handle infinite queries, parallel queries, offline-first network modes, and error boundaries.
  • Migration and debugging: Correct common v4-to-v5 changes such as object syntax, gcTime, isPending, placeholderData, and throwOnError.
  • Real-world use case: Clean up a todo, user, or dashboard data layer so every component shares the same cache and loading behavior.

Quick Start

Ask the skill to review your TanStack Query code and rewrite it for v5 with the correct hooks, caching, and migration fixes.

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 code from v4 to TanStack Query v5?

Migrating React Query to v5 requires switching to object syntax for hooks, replacing cacheTime with gcTime, using isPending for loading states, and adding explicit initialPageParam for infinite queries to ensure correct cache timing and state handling.

How do I set up optimistic updates with TanStack Query mutations?

Optimistic updates in TanStack Query use mutation patterns to immediately update the UI cache before server confirmation, then automatically roll back changes if the mutation fails, ensuring reliable React data fetching during network operations.

Why does my React server state hydration fail during SSR with TanStack Query?

SSR hydration debugging in TanStack Query requires proper server state prefetching and dehydration on the server side, then rehydrating the query cache on the client to prevent mismatches and ensure reliable React data fetching.

How do I configure infinite queries with initialPageParam in TanStack Query v5?

Infinite queries in TanStack Query v5 require an explicit initialPageParam property to define the starting page, replacing the previous implicit default, along with object syntax for the useInfiniteQuery hook configuration.

When should I use throwOnError for error boundaries with TanStack Query?

The throwOnError option in TanStack Query safely integrates query errors with React error boundaries, allowing you to catch and render fallback UI for failed fetches rather than handling errors manually in every component.

Does TanStack Query v5 support offline network modes for React applications?

TanStack Query v5 supports offline-first network modes that pause mutations and queue them for retry when connectivity returns, allowing React applications to maintain server state synchronization during intermittent network conditions.