tanstack-query

Implement TanStack Query v5 data fetching, caching, and mutation patterns for React.

Updated Jun 18, 2026

Search Tags:#caching #react #data fetching #tanstack query #mutations #server state

Ready to run

npx skills add https://github.com/MinhDuyDEV/mdpi --skill tanstack-query-minhduydev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/MinhDuyDEV/mdpi/tree/main/.pi/skills/tanstack-query
Command: npx skills add https://github.com/MinhDuyDEV/mdpi --skill tanstack-query-minhduydev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers implement robust server-state management in React applications by providing patterns for fetching, caching, synchronizing, and mutating remote data with TanStack Query v5.

Core Features & Use Cases

Data Fetching and Caching: Configure useQuery workflows, query keys, cache behavior, and background synchronization for API data.
Mutations and Optimistic Updates: Implement useMutation patterns with invalidation, rollback handling, and responsive UI updates.
Advanced Query Patterns: Handle infinite queries, prefetching, SSR hydration, and combining TanStack Query with server actions in production applications.

Quick Start

Use the tanstack-query skill to implement a React data fetching layer with caching, mutations, and optimistic updates for my application.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema

How do I fetch and cache API data in React using TanStack Query v5?▼

Fetch and cache API data in React by configuring useQuery workflows with structured query keys, cache behavior settings, and background synchronization. This ensures reliable server-state management and automatic data updates for your application components.

What is the best way to handle optimistic updates and rollback for mutations in React?▼

Handle optimistic updates and rollback for mutations by implementing useMutation patterns with cache invalidation. This approach applies responsive UI updates immediately while ensuring automatic data synchronization and rollback handling if the server request fails.

How does SSR hydration work for React server-state data fetching?▼

SSR hydration for React data fetching works by prefetching queries on the server and applying hydration patterns to synchronize server-state data on the client. This prevents waterfalls and ensures cached data is immediately available during initial render.

Can I implement infinite queries and pagination for API integration in React?▼

Yes, you can implement infinite queries and pagination for API integration in React. Advanced query patterns support loading paginated API data incrementally, combining structured query keys with cache configuration to maintain reliable application data across pages.

When do I need structured query keys for React server-state caching?▼

You need structured query keys for React server-state caching when managing multiple API data sources. Structured keys enable precise cache invalidation, control background synchronization, and allow targeted mutation handling to keep client-side data synchronized reliably.