skills.rest
wanghaisheng
wanghaishengCOMMUNITY
Explore all skills by this author →
Website𝕏@edwin_uestcGitHub

tanstack-query-best-practices

Implement TanStack Query best practices for React server-state management.

10|1|Updated Dec 16, 2024
Search Tags:#cache#ssr#react-query#tanstack-query#data-fetching#server-state
One-click install
npx skills add https://github.com/wanghaisheng/cloudflare-workers-d1-r2-expo-turborepo-trpc-workflows-astro-cleark --skill tanstack-query-best-practices-wanghaisheng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/wanghaisheng/cloudflare-workers-d1-r2-expo-turborepo-trpc-workflows-astro-cleark/tree/main/ref/tanstack/tanstack-query
Command: npx skills add https://github.com/wanghaisheng/cloudflare-workers-d1-r2-expo-turborepo-trpc-workflows-astro-cleark --skill tanstack-query-best-practices-wanghaisheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query best practices guide teams to implement data fetching, caching, and server-state management consistently across React applications.

Core Features & Use Cases

  • Establish a consistent approach to query keys, caching, and invalidation across the codebase.
  • Provide rules for query configuration, mutations, error handling, SSR hydration, and parallel/infinite queries.
  • Real-world scenarios include SSR/SSG hydration, optimistic updates, and offline-first considerations.

Quick Start

Configure your project by adopting the rules and patterns in this skill to ensure reliable data fetching, caching, and server-state management.

Frequently Asked Questions about tanstack-query-best-practices

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

FAQPage Schema
What's the best way to manage server-state and data fetching consistency in React apps?▼

To manage server-state consistently, adopt standardized query keys, caching strategies, and invalidation rules across your React codebase, ensuring reliable data fetching and synchronization.

How do I handle SSR hydration and data fetching with TanStack Query?▼

Handle SSR hydration by applying specific guidance for server-side generation and hydration, ensuring your fetched data correctly initializes on the client without hydration mismatches.

How do I implement optimistic updates and mutations in React Query?▼

Implement optimistic updates by following mutation rules that allow you to immediately update the UI state before the server confirms the change, including structured error handling to rollback if needed.

Does TanStack Query work for complex pagination and infinite queries in admin dashboards?▼

TanStack Query supports complex pagination and infinite queries in dashboards by providing specific patterns for parallel fetching and managing server-state across large administrative interfaces.

What are the best practices for query key structure and cache invalidation?▼

Best practices for query keys involve establishing a consistent hierarchical structure for cache identification, paired with rigorous invalidation strategies to ensure stale data is refetched precisely when needed.

Related Skills

Explore More Software Engineering Skills→
zanarootzanaroot
2

react-query

Implement React Query patterns for data fetching, caching, and server state management.

Official
Advanced
rnavarychrnavarych
14

role-mobile:offline-first

Guide offline-first mobile architecture with local database synchronization and conflict resolution.

Community
Advanced
abereghiciabereghici

compositions/router-query

Coordinate TanStack Router with TanStack Query for data fetching and caching during navigation.

Community
Advanced
Yoriichi-DangYoriichi-Dang

tanstack-query-best-practices

Structure TanStack Query data fetching, caching, and server state in React applications.

Community
Advanced