tanstack-query

Manage client-side server state with automatic caching and background refetching.

Updated Feb 24, 2026

Search Tags:#caching #tanstack #queries #mutations #data-fetching #server-state

Ready to run

npx skills add https://github.com/bartolomeomueller/hr --skill tanstack-query-bartolomeomueller

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manages server state in client applications by providing automatic caching, background refetching, and optimistic updates to keep UI data in sync with a remote source.

Core Features & Use Cases

Automatic caching and background refetching for server data.
Query and mutation APIs for data fetching, optimistic updates, and invalidation strategies.
Real-world use: fetch user data with useQuery, update a list with useMutation, and keep UI synchronized across components.

Quick Start

Install the library, initialize a QueryClient, wrap your app with QueryClientProvider, and start using useQuery to fetch and cache data.

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 synchronize data in a modern frontend app?▼

You can manage server state by using automatic caching, background refetching, and optimistic updates to keep UI data synchronized with a remote source across components.

How do I fetch and cache server data with query keys and a query function?▼

Fetch and cache server data by defining explicit query keys and a queryFn within the useQuery API, which handles data fetching, caching, and background synchronization automatically.

How do I update remote data and handle cache invalidation after mutations?▼

Update remote data using the useMutation API and manage cache invalidation by configuring mutation lifecycle options to ensure predictable UI synchronization after data changes.

Can I use this server-state management approach with TypeScript and other frameworks?▼

Yes, this server-state management approach supports TypeScript and applies across React and other frameworks, requiring a modern frontend setup to ensure deterministic behavior.

What is the best way to initialize server-state caching before fetching data?▼

The best way to initialize server-state caching is to install the library, create a QueryClient instance, wrap your application with QueryClientProvider, and then start fetching data with useQuery.

When do I need optimistic updates for client-side server state management?▼

You need optimistic updates in client-side server state management when you want to immediately reflect expected data changes in the UI while waiting for the remote mutation to complete.