skills.rest
ataschz
ataschzCOMMUNITY
Explore all skills by this author →
Website𝕏@ataschzGitHub

tanstack-query

Migrate and configure TanStack Query v5 in React apps with type-safe patterns.

18|4|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/ataschz/tanstack-start-mastra-example --skill tanstack-query-ataschz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/ataschz/tanstack-start-mastra-example/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/ataschz/tanstack-start-mastra-example --skill tanstack-query-ataschz

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps teams migrate to and efficiently use TanStack Query v5 in React apps, consolidating best practices and migration fixes to accelerate adoption.

Core Features & Use Cases

  • UseMutationState, simplified optimistic updates, throwOnError, offline/online network modes, and infiniteQueryOptions to handle complex data fetching patterns.
  • Supports v4→v5 migration corrections (object syntax, isPending, gcTime, placeholderData) and common SSR/hydration issues.
  • Encourages reusable patterns via queryOptions factories, multi-query orchestration, and robust caching strategies for scalable apps.

Quick Start

  1. Install required packages and set up a QueryClient.
  2. Start using useQuery and useMutation with the object syntax and queryOptions for consistency.
  3. Consult the references for migration tips and best practices.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I migrate TanStack Query from v4 to v5 in React?▼

Migrate TanStack Query from v4 to v5 by adopting object syntax for hooks, replacing cacheTime with gcTime, updating isLoading to isPending, and configuring placeholderData to resolve breaking changes safely.

What is the best way to configure infinite queries in TanStack Query v5?▼

Configure infinite queries in TanStack Query v5 using infiniteQueryOptions and providing an explicit initialPageParam to maintain type-safe, reusable configurations for paginated data fetching.

How do I implement optimistic updates with TanStack Query v5?▼

Implement optimistic updates with TanStack Query v5 using simplified mutation patterns and UseMutationState to manage UI state immediately before server confirmation, ensuring robust data synchronization.

Can I use TanStack Query v5 for offline and online network modes?▼

TanStack Query v5 supports offline and online network modes, enabling robust caching strategies for React apps to handle network interruptions and synchronize data seamlessly upon reconnection.

How do I fix SSR and hydration issues when using TanStack Query v5?▼

Fix SSR and hydration issues in TanStack Query v5 by applying migration-safe patterns, configuring QueryClient correctly, and using throwOnError to manage rendering states during server-side data fetching.

Related Skills

patricio0312revpatricio0312rev
5

tanstack-query-setup

Set up TanStack Query to manage server state in React apps.

Community
Advanced
jdretsjdrets

tanstack-query

Manage React server state with TanStack Query v5 patterns.

Community
Advanced
HouseGarofaloHouseGarofalo
3

tanstack-query

Manage server state in React applications with TanStack Query.

Official
Intermediate
willyu1007willyu1007

fetch-frontend-data

Fetch and mutate frontend data with cache invalidation and optimistic updates.

Community
Intermediate