tanstack-query

Manage client-side server state with QueryClient and useQuery/useMutation hooks.

Updated Jan 24, 2026
One-click install
npx skills add https://github.com/Ikki-Group/erp --skill tanstack-query-ikki-group
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/Ikki-Group/erp/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/Ikki-Group/erp --skill tanstack-query-ikki-group

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manages client-side server state by providing a robust data fetching, caching, and synchronization layer to keep UI in sync with server data.

Core Features & Use Cases

  • Automatic caching, background refetching, and stale-while-revalidate patterns for responsive UIs.
  • Query and mutation orchestration across React, Vue, Solid, Svelte, Angular, and plain TS/JS apps, with hierarchical keys and fine-grained invalidation.
  • Use cases include dashboards, data-heavy forms, and real-time collaboration interfaces requiring consistent server data.

Quick Start

Create a QueryClient, wrap your app with it, and begin using useQuery and useMutation to fetch and mutate data with sensible defaults.

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 or Vue application?

Server state management is handled by configuring a QueryClient and using useQuery and useMutation hooks to fetch, cache, and synchronize data, ensuring your UI stays in sync with the server.

How does staleTime and background refetching work for cached queries?

StaleTime defines how long cached data remains fresh before triggering background refetching. This stale-while-revalidate pattern keeps UIs responsive by displaying cached data while fetching updates automatically.

Can I use this data-fetching approach with Svelte, Solid, and Angular?

Yes, this server state management approach supports major frameworks including Svelte, Solid, and Angular, alongside React and Vue, allowing query and mutation orchestration across diverse TS/JS ecosystems.

What is the best way to handle data consistency in data-heavy dashboards and real-time interfaces?

The best way to maintain data consistency is leveraging hierarchical query keys and fine-grained invalidation to automatically manage caching, background refetching, and mutations for complex UI scenarios.

Do I need a specific setup to start managing server state in TypeScript apps?

You need to create a QueryClient, wrap your application with it, and begin using useQuery and useMutation to fetch and mutate data with sensible defaults for your TS/JS apps.

Why does stale data show up in my UI instead of fetching fresh server data?

Stale data appears because cached queries remain visible during background refetching. Adjusting staleTime configurations and implementing hierarchical query key invalidation ensures data is refreshed and kept consistent.