skills.rest
franzosterkamp
franzosterkampCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Manage server state in React with fetching, caching, and updating operations.

Updated May 6, 2026
Search Tags:#caching#react#ssr#data-fetching#optimistic-updates#infinite-scroll
One-click install
npx skills add https://github.com/franzosterkamp/card2contact --skill tanstack-query-franzosterkamp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/franzosterkamp/card2contact/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/franzosterkamp/card2contact --skill tanstack-query-franzosterkamp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, @tanstack/react-query-devtools, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the management of server state in React applications, simplifying data fetching, caching, and synchronization to enhance performance and user experience.

Core Features & Use Cases

  • Comprehensive Data Handling: Facilitates efficient server state management with query, mutation, and cache operations.
  • Versatile Scenarios: Ideal for real-time dashboards, data-driven forms, and infinite scrolling lists.
  • Use Case: Automate data fetching and cache updates for a dashboard displaying live stock prices, ensuring minimal network usage and instant updates.

Quick Start

Use the tanstack-query skill to set up React Query with devtools and manage data fetching in your React app.

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 React efficiently?▼

Managing server state in React requires a declarative API for fetching, caching, and updating data. This approach ensures minimal network usage and handles complex scenarios like infinite scrolling and optimistic updates.

What is the best way to implement optimistic updates for React data mutations?▼

Optimistic updates in React are handled through robust mutation operations that synchronously update the cache. This declarative data management approach ensures instant UI updates before the server response arrives.

How do I set up React data caching with SSR hydration support?▼

React data caching with SSR hydration is configured using flexible query utilities. This ensures seamless integration during server-side rendering by hydrating the cached server state efficiently on the client.

Can I use TanStack Query for infinite scrolling lists in my React application?▼

Yes, TanStack Query supports infinite scrolling lists through its comprehensive data handling capabilities. It manages server state and cache operations to enable seamless pagination and data fetching for dynamic lists.

Does this React data management approach include developer tools for debugging?▼

Yes, the setup includes dedicated developer tools for debugging React server state. These devtools integrate seamlessly with the ecosystem to monitor queries, mutations, and cache updates directly in the browser.

When should I use a declarative query API instead of standard React state for fetching?▼

A declarative query API is necessary when applications face complex performance challenges with server state. It replaces standard React state by automating cache synchronization, background updates, and network usage optimization.

Related Skills

Explore More Software Engineering Skills→
maxenergymaxenergy

setup-pre-commit

Automate Husky pre-commit hook setup with lint-staged and Prettier for JavaScript/TypeScript projects.

Community
Intermediate
teocraftersteocrafters

ssr-data-fetching

Implement SSR-compatible data fetching in Nuxt 4 with useFetch or useAsyncData.

Official
Advanced
ai-enhanced-engineerai-enhanced-engineer
3

react-native-modern-patterns

Guide modern React Native development with TypeScript, Expo SDK, and React Navigation.

Official
Advanced
DrLuggelsDrLuggels
3

react-state-management

Guide React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Community
Intermediate