skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Implement TanStack Query 5 server state management for React applications.

15|2|Updated May 23, 2026
Search Tags:#suspense#react-query#optimistic-updates#query-keys#tanstack-query-5#ssr-prefetch
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill tanstack-query-vkirill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/tanstack-query
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill tanstack-query-vkirill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack Query 5 removes the complexity of coordinating server-state fetching, caching, invalidation, and UI loading/error states so your React app behaves consistently across navigation, refetches, SSR hydration, and optimistic updates.

Core Features & Use Cases

  • Query key factories & cache identity: prevents stale-data bugs by ensuring hierarchical, variable-inclusive query keys and safe invalidation.
  • Queries, mutations, and infinite pagination: use useQuery, useMutation, useInfiniteQuery, and useSuspenseQuery to cover standard, paginated, and Suspense-first data flows.
  • Optimistic updates with rollback: implement production-safe patterns using onMutate, cancelQueries, setQueryData, and onError/onSettled reconciliation.
  • SSR prefetching for Next.js App Router: dehydrate/hydrate via HydrationBoundary to avoid loading flashes and refetch waterfalls, with guardrails around staleTime mismatches.

Quick Start

Use the tanstack-query skill to set up a TanStack Query 5 data layer using a query key factory and a production QueryClient baseline, then implement useQuery/useMutation with correct staleTime, gcTime, and optimistic rollback where needed.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I implement optimistic updates with rollback in TanStack Query 5?▼

Optimistic updates with rollback in TanStack Query 5 use `onMutate` to cancel queries and `setQueryData` to pre-populate the cache, while `onError` or `onSettled` reconciles or reverts state for production-safe mutations.

What's the best way to structure query keys in React Query 5?▼

The best way to structure query keys in React Query 5 is using hierarchical query key factories, which prevents stale-data bugs by ensuring variables are included in the key identity for safe cache invalidation.

How does SSR prefetching work with Next.js App Router and TanStack Query?▼

SSR prefetching with Next.js App Router uses `HydrationBoundary` to dehydrate and hydrate the `QueryClient` cache, avoiding refetch waterfalls by prefetching data on the server with correctly configured `staleTime`.

Do I need a per-request QueryClient for server-side rendering in React Query 5?▼

Yes, you need a per-request `QueryClient` for server-side rendering in React Query 5 to prevent data leaking between users, ensuring isolated cache states during dehydrate and hydrate operations.

Why did cacheTime change to gcTime in TanStack Query 5?▼

`cacheTime` changed to `gcTime` in TanStack Query 5 to more accurately reflect that it controls garbage collection of inactive queries, clarifying the distinction between cache freshness and cache eviction.

How do I handle infinite pagination and Suspense mode in React Query?▼

Infinite pagination uses `useInfiniteQuery` for paginated data flows, while Suspense mode uses `useSuspenseQuery`, allowing you to cover standard and Suspense-first data fetching patterns in React Query.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

nextjs-data-fetching-and-caching

Configure data fetching and caching in Next.js App Router applications.

Official
Intermediate
gepetojjgepetojj
1

safe-action-tanstack-query

Bridge Next Safe Action results with TanStack Query mutations.

Community
Advanced
Camilo8902Camilo8902

react-server-components

Implement React Server Components with Next.js App Router for data fetching and streaming.

Community
Advanced
cenjiecenjie

state-management

Implement React Query and Zustand patterns for server and client state.

Community
Advanced