data-fetching

What problem does it solve?

This Skill provides a robust and efficient strategy for data fetching in Next.js applications, eliminating common issues like UI flicker, manual API client maintenance, and complex caching. It leverages Orval and TanStack Query's HydrationBoundary pattern to ensure fast, type-safe, and real-time data delivery, saving you development time and improving user experience.

Core Features & Use Cases

• HydrationBoundary Pattern: Implements the recommended TanStack Query pattern for server-side prefetching and client-side hydration, ensuring flicker-free initial loads.
• Orval Integration: Enforces the use of auto-generated, type-safe API client functions, eliminating manual fetch() calls.
• SSE for Real-Time Updates: Seamlessly integrates Server-Sent Events (SSE) with React Query to provide automatic, real-time data invalidation and updates.
• Use Case: When building a new dashboard, use this skill to prefetch critical data on the server using Orval-generated functions, ensuring a fast, flicker-free initial load for your users, with subsequent real-time updates via SSE.

Quick Start

Explain the HydrationBoundary pattern for server-side data prefetching and client-side consumption using TanStack Query, detailing how a Server Component prefetches data and passes it to a Client Component.