tanstack-query

Manage server state with caching, background refetching, and synchronization.

Updated Aug 23, 2026

Search Tags:#caching #state management #data fetching #async #server state #react query

Ready to run

npx skills add https://github.com/dwhoban/chanfana-vite-kumo --skill tanstack-query-dwhoban

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/dwhoban/chanfana-vite-kumo/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/dwhoban/chanfana-vite-kumo --skill tanstack-query-dwhoban

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the complex task of managing server state in applications, handling data fetching, caching, synchronization, and updates automatically.

Core Features & Use Cases

Declarative Data Fetching: Define how to fetch your data and let the library handle the rest.
Automatic Caching: Data is cached automatically, reducing redundant network requests.
Background Updates: Keeps your UI fresh by refetching data in the background.
Use Case: Integrate this Skill into a dashboard application to seamlessly fetch and display user data, project statuses, and recent activity, ensuring the information is always up-to-date without manual refresh actions.

Quick Start

Use the tanstack-query skill to set up a basic query client and provider for your React application.

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 fetching in a React application?▼

You can manage server state in a React application by using a declarative data fetching approach that handles caching, synchronization, and background updates automatically. This keeps your UI fresh without requiring manual refresh actions.

What is the best way to handle async data caching and background refetching?▼

The best way to handle async data caching is to use a stale-while-revalidate pattern that caches data automatically to reduce redundant network requests. It then refetches data in the background to keep your interface continuously up-to-date.

How do I set up a query client and provider for data fetching?▼

To set up a query client and provider for data fetching, you configure a basic client wrapper around your application. This establishes the foundation required to manage automatic caching and background synchronization across your components.

Does this async state management approach work with JavaScript frameworks other than React?▼

Yes, this async state management approach works across various JavaScript frameworks, not just React. It provides robust solutions for data fetching, pagination, and optimistic updates regardless of your specific framework environment.

When do I need a dedicated library for server state instead of using local state management?▼

You need a dedicated library for server state when your application requires automatic caching, background refetching, and complex synchronization. It simplifies these tasks by handling updates and stale-while-revalidate patterns that local state tools cannot manage.