skills.rest
Neko-Protocol
Neko-ProtocolOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tanstack-query

Manage React server state with TanStack Query v5 data fetching and caching.

6|47|Updated Dec 20, 2025
Search Tags:#caching#state management#api#react#data fetching#tanstack query
One-click install
npx skills add https://github.com/Neko-Protocol/Neko-DApp --skill tanstack-query-neko-protocol
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/Neko-Protocol/Neko-DApp/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/Neko-Protocol/Neko-DApp --skill tanstack-query-neko-protocol

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and templates (resource) and rules (resource) components.

What problem does it solve?

This Skill helps developers efficiently manage server state in React applications using TanStack Query v5, addressing common migration issues and advanced patterns.

Core Features & Use Cases

  • Data Fetching & Caching: Simplifies fetching, caching, synchronizing, and updating server state in your React applications.
  • v4 to v5 Migration: Provides guidance on handling breaking changes like object syntax, renamed options (gcTime), and status flags (isPending).
  • Advanced Patterns: Covers useMutationState, optimistic updates, error handling with throwOnError, offline support, and infiniteQueryOptions.
  • Use Case: Debugging SSR/hydration issues, implementing complex data fetching logic, or migrating an existing React application from v4 to v5 of TanStack Query.

Quick Start

Use the tanstack-query skill to generate a basic React Query provider setup.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I handle server state and data caching in React applications?▼

Server state in React is managed by fetching, caching, and synchronizing data using TanStack Query v5. This approach handles asynchronous data fetching and updates automatically, keeping your UI fresh without complex global state boilerplate.

How do I migrate from TanStack Query v4 to v5?▼

Migrating from v4 to v5 requires updating to object syntax, renaming options like cacheTime to gcTime, and updating status flags such as isLoading to isPending. The skill provides detailed code examples and guidance for these breaking changes.

How do I implement optimistic updates with useMutation in React?▼

Optimistic updates in React are implemented using mutation handling in TanStack Query v5. This lets you immediately update the UI before the server response arrives, rolling back changes automatically if the mutation fails.

Does TanStack Query work for offline capabilities and error boundaries?▼

Yes, TanStack Query supports offline capabilities and integrates with error boundaries using the throwOnError option. This ensures your React application gracefully handles network failures and unexpected data fetching errors.

What is the best way to debug SSR hydration issues with React Query?▼

Debugging SSR hydration issues requires using TanStack Query v5's advanced patterns and provider setup. It provides specific mechanisms to properly dehydrate and hydrate server state, preventing mismatches between server and client renders.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
beavermoneybeavermoney
36

relay-pagination

Implement Relay cursor-based pagination with usePaginationFragment and load functions.

Official
Advanced
LutimiLutimi

ckm:ui-styling

Integrate shadcn/ui, Radix primitives, and Tailwind CSS into React interfaces.

Community
Advanced
nekorush14nekorush14
4

react-state-management

Manage React client state with Context API and server state with TanStack Query.

Community
Advanced