tanstack-query

Manage React server state with TanStack Query v5 code examples.

5|Updated Aug 31, 2025
One-click install
npx skills add https://github.com/KonghaYao/zen-code --skill tanstack-query-konghayao
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/KonghaYao/zen-code/tree/main/.claude/skills/tanstack-query
Command: npx skills add https://github.com/KonghaYao/zen-code --skill tanstack-query-konghayao

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps developers efficiently manage server state in React applications, simplifying data fetching, caching, and synchronization, and resolving common migration issues from older versions.

Core Features & Use Cases

  • Data Fetching & Caching: Streamlines fetching, caching, and updating server data.
  • Migration Assistance: Guides users through v4 to v5 migration, highlighting breaking changes and solutions.
  • Advanced Patterns: Demonstrates optimistic updates, infinite scrolling, and error boundary integration.
  • Use Case: When setting up complex data fetching logic in a React app, debugging SSR issues, or migrating an existing project to the latest TanStack Query version.

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 manage server state and data caching in React?

TanStack Query manages server state and data caching in React by streamlining data fetching, updating, and background synchronization. It provides built-in mechanisms for request deduplication and cache invalidation to keep server data synchronized.

How do I implement optimistic updates and infinite scrolling in React?

You can implement optimistic updates and infinite scrolling in React using advanced TanStack Query patterns. It provides specific mutation patterns to immediately reflect UI changes before server confirmation and infinite query hooks for paginated data fetching.

Does TanStack Query v5 support TypeScript integration and error boundaries?

Yes, TanStack Query v5 supports robust TypeScript integration and error handling. It provides typed hooks for strict type safety and allows you to wrap queries with React error boundaries to gracefully catch and manage rendering exceptions.

How do I migrate from TanStack Query v4 to v5?

Migrating from TanStack Query v4 to v5 requires addressing specific breaking changes in the API. The skill provides detailed migration strategies and guides you through updating hook signatures and cache APIs to ensure a smooth transition.

Why are my React data fetching queries not caching properly?

Improper data caching in React data fetching often stems from incorrect query key configurations or missing cache invalidation logic. TanStack Query provides rules and best practices to structure query keys and manage stale times effectively.