tanstack-query

Name: tanstack-query
Availability: InStock
Author: NAinfini

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

Ready to run

npx skills add https://github.com/NAinfini/Guild_Management --skill tanstack-query-nainfini

💬 Prompt for ChatGPT / Claude Chat▼

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.