skills.rest
eyenalxai
eyenalxaiCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query-best-practices

Implements TanStack Query patterns for data fetching, caching, mutations, and server state in React applications.

Updated Sep 5, 2023
Search Tags:#caching#data fetching#tanstack query#mutations#server state#optimistic updates#react query
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill tanstack-query-best-practices-eyenalxai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/tanstack-query-best-practices
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill tanstack-query-best-practices-eyenalxai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React applications often suffer from cache inconsistencies, unnecessary network requests, stale UI data, and poorly handled mutations when server state is managed ad hoc. This Skill provides a structured rule set for TanStack Query (React Query) that prevents these bugs and standardizes data fetching across a codebase. ## Core Features & Use Cases - Query Key and Caching Rules: Enforces array-based hierarchical query keys, staleTime/gcTime tuning, targeted invalidation, and QueryClient-level defaults. - Mutation Patterns: Covers optimistic updates with rollback context, error handling, loading states via isPending, and cross-component tracking with useMutationState. - Advanced Scenarios: Includes rules for infinite queries, parallel fetching with useQueries, SSR dehydration/hydration, prefetching on user intent, offline network modes, and cache persistence. - Use Case: When building a paginated product list with optimistic cart updates in a React app, apply the infinite query, placeholderData, and optimistic update rules to avoid pagination bugs and stale cart state. ## Quick Start Ask the AI to review your React data fetching code against the TanStack Query best practices rules and fix any caching or mutation issues it finds.

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 implement optimistic updates with TanStack Query?▼

Cancel outgoing queries in onMutate, snapshot the previous cache with getQueryData, apply the change via setQueryData, and return the snapshot as context. On error, restore the snapshot; on settled, invalidate the query to sync with the server.

What is the difference between placeholderData and initialData in React Query?▼

initialData is persisted to the cache and respects staleTime, making it suitable for SSR data. placeholderData is temporary, never cached, always triggers a background fetch, and sets isPlaceholderData to true, making it ideal for previews and pagination.

How should I configure staleTime and gcTime in TanStack Query?▼

Match staleTime to data volatility: 0 for real-time data, 30 seconds to 5 minutes for frequently changing data, and longer for reference data. Set gcTime based on how often users revisit pages, typically 10 to 30 minutes for frequently visited routes.

Does TanStack Query support SSR with Next.js or other frameworks?▼

Yes, use the dehydrate/hydrate pattern: create a QueryClient per request, prefetch queries on the server, dehydrate the cache, and wrap the client app in HydrationBoundary. Set a higher staleTime on the server to avoid double-fetching after hydration.

Why does my infinite query fetch duplicate pages in React Query?▼

Duplicate fetches happen when fetchNextPage is triggered without checking isFetching or isFetchingNextPage. Always guard scroll handlers and buttons with these flags, and ensure getNextPageParam returns undefined when no more pages exist.

When should I not retry failed queries in TanStack Query?▼

Avoid retrying client errors like 404 or 403 since they will not resolve on retry. Use a retry function that checks the error status, retries server errors up to two times, and keep mutation retry at the default of zero.

Related Skills

Explore More Software Engineering Skills→
TMHSDigitalTMHSDigital
2

mobile-api-integration

Integrate React Native and Expo apps with REST and GraphQL APIs.

Community
Advanced
sc30gswsc30gsw

native-data-fetching

Implement and debug network requests and API data fetching for Expo and React Native.

Community
Advanced
hq-opensourcehq-opensource
7

react-ui-patterns

Audit React components for loading, error, empty, and button-state issues.

Official
Intermediate
DucCuong159DucCuong159

frontend-optimistic-mutations

Implements optimistic update lifecycle with rollback and idempotency for React query caches.

Community
Advanced