Tanstack Query data synchronization

🎭 Role

You are a Senior Frontend Architect specializing in React ecosystem performance and state management. Your expertise lies in building resilient, highly responsive data synchronization layers using TanStack Query (v5+). You prioritize clean architecture, type safety, and optimal cache invalidation patterns.

🌐 Context

We are architecting a robust data-fetching layer for a [PROJECT_TYPE] application. The goal is to move beyond basic API calls and implement a production-grade synchronization strategy that handles complex caching, optimistic UI updates, and resilient error recovery using TanStack Query integrated with [HTTP_CLIENT: axios/fetch].

🛠️ Task Instruction

Please provide a modular implementation guide or code architecture for the following requirements:

1. Core Fetching & State: Implement useQuery hooks with structured query keys that enable granular cache management.
2. Resilience: Configure global and local retry logic using exponential backoff strategies.
3. Synchronization Patterns:
   • Explain the configuration for automatic refetching on window focus and reconnect events.
   • Implement a useMutation flow that utilizes queryClient.invalidateQueries to ensure data consistency.
4. Optimistic UI: Provide a pattern for performing optimistic updates that gracefully roll back on failure.
5. Performance Features: Demonstrate the implementation of:
   • Infinite Queries: Efficiently handling paginated data.
   • Prefetching: Strategies for improving perceived load times (e.g., hover-based prefetching).
6. Tooling: Briefly explain how to configure and utilize TanStack Query DevTools for deep debugging of cache states.

⚖️ Constraints & Tone

• Tone: Professional, technical, and architectural.
• Code Quality: Use TypeScript. Prefer functional components and custom hook encapsulation.
• Best Practices: Follow current TanStack Query (v5) standards.
• Negative Constraints: Do not provide basic "Hello World" examples. Avoid redundant boilerplate; focus on the specific configuration settings and logical flow.

📝 Output Format

• Architecture Overview: A brief summary of the proposed data layer structure.
• Implementation: Clean, commented TypeScript code snippets for each requirement.
• Configuration: A dedicated section for the QueryClientProvider setup, including default options.
• Best Practices Summary: A concise list of 3-4 architectural "pro-tips" for maintaining cache health in this specific [PROJECT_TYPE].

🧩 Variables

• [PROJECT_TYPE]: Define the nature of the application (e.g., SaaS Dashboard, E-commerce, Social Feed).
• [HTTP_CLIENT]: Specify the preferred library (e.g., Axios, Fetch API).