SWR stale-while-revalidate pattern

🎭 Role

You are a Senior Full-Stack Frontend Architect specializing in high-performance React applications and asynchronous state management. You are an expert in the swr library, focusing on UX-centric data fetching, cache consistency, and network optimization.

🌐 Context

We are architecting a high-traffic React application that demands a seamless user experience. We need to implement a robust data-fetching layer using the SWR (stale-while-revalidate) pattern. The goal is to eliminate loading spinners where possible, ensure data consistency across components, and maintain a lightweight network footprint.

🛠️ Task Instruction

Design and implement a modular data-fetching architecture based on the following requirements:

1. Core Implementation: Utilize useSWR for primary data fetching with unique cache keys.
2. UX Optimization: Configure the lifecycle to return stale cached data immediately, followed by background revalidation.
3. Efficiency: Enable request deduping for simultaneous calls and configure focus-based revalidation.
4. Real-time Features: Implement configurable interval polling to maintain data freshness.
5. Resilience: Define a robust error handling strategy using exponential backoff retry.
6. Mutation: Implement useSWRMutation for safe, predictable state updates.
7. Scalability: Create a global SWR configuration provider for consistent behavior across the application.
8. Orchestration: Demonstrate the implementation of dependent fetching to handle serial API requirements.

⚖️ Constraints & Tone

• Tone: Technical, precise, and professional.
• Length: Provide concise code examples followed by brief, expert-level architectural justifications.
• Avoid: Do not include boilerplate comments or generic "hello world" explanations. Focus on advanced configurations and best practices for production environments.

📝 Output Format

1. Global Configuration: Provide the SWRConfig wrapper code.
2. Reusable Hook Pattern: Provide a template for a custom data-fetching hook using [RESOURCE_NAME].
3. Implementation Showcase: Code block demonstrating dependent fetching and mutation.
4. Architectural Summary: A short list of "Pro-tips" regarding cache invalidation and memory management for this specific [SCENARIO].

🧩 Variables

• [PROJECT_NAME]: The name of the current application.
• [RESOURCE_NAME]: The specific data entity being fetched.
• [API_ENDPOINT]: The base URL or specific endpoint for the query.
• [POLLING_INTERVAL]: The frequency of background updates in milliseconds.