skills.rest
NAinfini
NAinfiniCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Adopt TanStack Query v5 for server-state management in React applications.

Updated Aug 23, 2026
Search Tags:#react#migration#ssr#hydration#tanstack-query#server-state#v5
One-click install
npx skills add https://github.com/NAinfini/Guild_Management --skill tanstack-query-nainfini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/NAinfini/Guild_Management/tree/main/.kilocode/skills/tanstack-query
Command: npx skills add https://github.com/NAinfini/Guild_Management --skill tanstack-query-nainfini

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Adopting TanStack Query v5 for robust server-state management in React applications.

Core Features & Use Cases

  • Covers migration from v4 and SSR hydration issues.
  • Provides patterns for queries, mutations, and cache invalidation with object syntax.
  • Includes guidance for server-side rendering, testing, and devtools usage.

Quick Start

Install @tanstack/react-query v5, initialize a QueryClient, and start using useQuery and useMutation with object syntax in your React components to fetch, cache, and invalidate server state.

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 server state management from TanStack Query v4 to v5?▼

Migrating server state management from TanStack Query v4 to v5 involves adopting enforced object syntax for queries and mutations, replacing deprecated APIs with gcTime, and updating initialPageParam and placeholderData configurations for robust cache handling.

What is the best way to resolve SSR hydration issues with React server state?▼

Resolving SSR hydration issues with React server state requires initializing a QueryClient on the server, prefetching data, and properly dehydrating and hydrating the query cache to prevent mismatches during server-side rendering.

How do I handle cache invalidation and mutations in React using object syntax?▼

Handling cache invalidation and mutations in React uses enforced object syntax by invoking useMutation with mutationKey and mutationFn parameters, then calling queryClient.invalidateQueries with a queryKey object to refresh server state.

Does TanStack Query v5 require object syntax for useQuery and useMutation?▼

TanStack Query v5 does require object syntax for useQuery and useMutation, meaning you must pass arguments like queryKey and queryFn within a single options object rather than as separate positional parameters to fetch server state.

What is gcTime in TanStack Query v5 and when do I need it?▼

gcTime in TanStack Query v5 specifies the garbage collection duration for inactive query data before cache removal. You need it to control server state cache persistence and manage application memory usage.

Can I use placeholderData and initialPageParam to prevent loading states in React?▼

You can use placeholderData to provide temporary cached values and initialPageParam to set starting pagination values in React, preventing flash loading states when fetching server state with useQuery and paginated queries.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

tanstack-query-guide

Configures TanStack Query for React server-state management with useQuery and useMutation.

Community
Intermediate
VKirillVKirill
15

tanstack-query

Implement TanStack Query 5 server state management for React applications.

Community
Advanced
vladimir-shirmanovvladimir-shirmanov

zustand-router-query

Coordinate React route data loading with Zustand and TanStack Query.

Community
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

react-state-management

Manage React state across local, global, and server contexts.

Official
Advanced