tanstack-query

Name: tanstack-query
Availability: InStock
Author: mikkelkrogsholm

Manage asynchronous server state with caching and background refetching for TypeScript/JavaScript applications.

5|3|Updated Feb 21, 2026

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

Ready to run

npx skills add https://github.com/mikkelkrogsholm/dev-skills --skill tanstack-query-mikkelkrogsholm

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the management of asynchronous server state in applications, handling complex tasks like data fetching, caching, background synchronization, and optimistic updates, thereby reducing boilerplate code and improving application performance.

Core Features & Use Cases

Declarative Fetching: Define data fetching logic using query keys and functions.
Automatic Caching: Caches query data to avoid redundant network requests.
Background Refetching: Refreshes data automatically in the background on window focus, reconnect, or at defined intervals.
Mutations: Manages server state updates (POST, PUT, DELETE) with built-in support for optimistic updates and invalidation.
Use Case: When building a dashboard that displays real-time user data, use TanStack Query to efficiently fetch, cache, and update this data as users interact with the application or as new information becomes available.

Quick Start

Use the tanstack-query skill to explain how to invalidate queries after a mutation.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema

How do I manage async server state with caching in TypeScript applications?▼

Manage async server state with caching by defining declarative fetching logic using query keys and functions. This approach handles data synchronization automatically, reducing boilerplate code and avoiding redundant network requests.

How do I invalidate queries after a mutation in TanStack Query?▼

Invalidate queries after a mutation by leveraging built-in mutation handling support for POST, PUT, and DELETE operations. This mechanism automatically synchronizes server state updates and facilitates optimistic UI updates.

Does TanStack Query work with Vue, Solid, and Svelte frameworks?▼

TanStack Query integrates with frontend frameworks like React, Vue, Solid, and Svelte. It provides efficient data lifecycle management and background synchronization across these diverse TypeScript and JavaScript environments.

How does background refetching work for real-time dashboard data?▼

Background refetching automatically refreshes real-time dashboard data on window focus, network reconnect, or at defined intervals. This ensures applications display updated user information without requiring manual intervention.

What is the best way to handle optimistic UI updates during data mutations?▼

Handle optimistic UI updates during data mutations by utilizing built-in synchronization features. This approach manages server state updates gracefully, allowing interfaces to reflect changes immediately before server confirmation.

When should I use an async state manager instead of manual data fetching?▼

Use an async state manager when building applications that require efficient data lifecycle management, automatic caching, and background refetching. It significantly reduces boilerplate code compared to handling complex data fetching strategies manually.