skills.rest
Mohamad44p
Mohamad44pCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-query-best-practices

Implement TanStack Query best practices for React data fetching and caching.

Updated Aug 23, 2026
Search Tags:#caching#react#error-handling#ssr#react-query#preloading#data-fetching
One-click install
npx skills add https://github.com/Mohamad44p/billix_agent_main --skill tanstack-query-best-practices-mohamad44p
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/Mohamad44p/billix_agent_main/tree/main/.agents/skills/tanstack-query-best-practices
Command: npx skills add https://github.com/Mohamad44p/billix_agent_main --skill tanstack-query-best-practices-mohamad44p

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, @tanstack/react-query-persist-client, @tanstack/query-sync-storage-persister, and includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill provides comprehensive best practices for optimizing data fetching, caching, and server state management in React applications using TanStack Query (React Query).

Core Features & Use Cases

  • Guidelines for Query Keys and Caching Strategies: Ensures cache consistency and reduces bugs through proper key structuring and staleTime settings.
  • Mutation and Invalidations: Promotes data consistency by properly invalidating and updating cache after mutations.
  • SSR Integration and Hydration: Guides SSR rendering with prefetching and cache dehydrate/hydrate techniques.
  • Prefetching and Parallel Queries: Enhances performance by preloading data based on user intent and executing multiple queries in parallel.
  • Error handling and Offline Support: Implements robust error boundaries and offline patterns for resilient UIs.

Quick Start

Follow these practices to set up your queries with correct key structures, cache policies, and error handling, ensuring high performance and reliability in data-driven React applications.

Frequently Asked Questions about tanstack-query-best-practices

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

FAQPage Schema
How do I structure React Query cache keys to avoid invalidation bugs?▼

Structure React Query cache keys as hierarchical arrays to ensure precise invalidation. Consistent query key design prevents stale data bugs and allows targeted cache updates after mutations.

What's the best way to prefetch data with React Query for SSR hydration?▼

Prefetch data on the server using React Query, then dehydrate the cache and send it to the client for hydration. This approach ensures seamless SSR integration and prevents client-side waterfalls.

How does React Query handle offline scenarios and error boundaries?▼

React Query handles offline scenarios using persisted client storage and manages error boundaries to catch fetching failures. This combination ensures resilient UIs during network interruptions.

How do I update the React Query cache after mutations?▼

Update the React Query cache after mutations by invalidating specific query keys. Proper invalidation triggers automatic refetches, ensuring data consistency across your application without manual state updates.

Can I execute parallel queries with TanStack Query to improve performance?▼

You can execute parallel queries with TanStack Query to improve data fetching performance. Running multiple queries concurrently reduces loading times and optimizes complex data workflows.

Related Skills

Explore More Software Engineering Skills→
pingqLINpingqLIN

tanstack-start-shadcn-tailwind

Guide TanStack Start, Shadcn/ui, and Tailwind CSS application development.

Community
Intermediate
heaptracetechnologyheaptracetechnology
13

mobile-state

Design scalable mobile-state architectures separating server and client data.

Community
Advanced
Camilo8902Camilo8902

tanstack-query-setup

Implement TanStack Query for server state management in React applications.

Community
Intermediate
rodrigobranasrodrigobranas
1

tanstack-query-best-practices

Standardize TanStack Query data-fetching and server-state patterns in React applications.

Community
Advanced