skills.rest
FrostFoe7
FrostFoe7COMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-query-best-practices

Guide React developers on TanStack Query caching, invalidation, pagination, and SSR hydration.

Updated Aug 27, 2026
Search Tags:#caching#react#javascript#SSR#react-query#data-fetching#optimizations
One-click install
npx skills add https://github.com/FrostFoe7/rdz --skill tanstack-query-best-practices-frostfoe7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/FrostFoe7/rdz/tree/main/.agents/skills/tanstack-query-best-practices
Command: npx skills add https://github.com/FrostFoe7/rdz --skill tanstack-query-best-practices-frostfoe7

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps developers understand best practices for implementing TanStack Query (React Query) to optimize data fetching, caching, and server state management in React applications.

Core Features & Use Cases

  • Guidelines & Rules: Offers comprehensive rules categorized by priority to improve query configuration and performance.
  • Code Examples: Provides practical snippets for cache management, invalidation, pagination, SSR, prefetching, and error handling.
  • Use Case: A developer seeks to improve app performance by applying precise invalidation and SSR hydration strategies.

Quick Start

Use this Skill to quickly find best practices for configuring React Query in a new React project or to troubleshoot existing data-fetching setup issues.

Frequently Asked Questions about tanstack-query-best-practices

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

FAQPage Schema
What are the best practices for React Query cache optimization and invalidation?▼

TanStack Query SSR hydration requires synchronizing server-fetched data with the client cache to avoid mismatches. This Skill provides detailed code examples for configuring hydration properly in React applications to ensure scalable data fetching.

How do I handle pagination and prefetching with TanStack Query in React?▼

You should not use TanStack Query for client-side state that is not fetched from a server. It is designed specifically for server state management, so applying it to local UI state limits its caching and invalidation advantages.

Can I use React Query for SSR hydration and error management in my application?▼

You should not use TanStack Query for client-side state that is not fetched from a server. It is designed specifically for server state management, so applying it to local UI state limits its caching and invalidation advantages.

How do I structure query keys for proper cache invalidation in React Query?▼

TanStack Query SSR hydration requires synchronizing server-fetched data with the client cache to avoid mismatches. This Skill provides detailed code examples for configuring hydration properly in React applications to ensure scalable data fetching.

When should I not use TanStack Query for data fetching?▼

Yes, React Query supports SSR hydration and error management. This Skill provides expert guidance and practical snippets to synchronize server state and handle errors systematically for maintainable React data fetching.

Related Skills

Explore More Software Engineering Skills→
markus41markus41
18

react-vite

Develop React 18+ apps with Vite and TypeScript.

Community
Intermediate
SylphxAISylphxAI
4

performance

Analyze Next.js frontend performance for Core Web Vitals and bundle size.

Official
Intermediate
vladimir-shirmanovvladimir-shirmanov

zustand-router-query

Coordinate React route data loading with Zustand and TanStack Query.

Community
Intermediate
oakossoakoss
1

tanstack-query

Manage React server state with TanStack Query caching and background updates.

Official
Advanced