frontend-api-patterns

What problem does it solve?

Frontend API Patterns provides a concise set of strategies to prevent data fetching waterfalls, centralize prefetching, and maintain predictable data flow in React applications that use TanStack Query and Suspensive, making UIs faster and error handling clearer.

Core Features & Use Cases

• Route-level prefetching: Use route loaders with ensureQueryData and a router-provided queryClient to block-render essential data before the component mounts.
• Server-only functions: Encapsulate secret-bearing or backend-only logic using server functions to avoid leaking environment variables into loaders.
• Suspense and query cohesion: Co-locate query declaration, transformation, and rendering using SuspenseQueries and SuspenseQuery to enable parallel fetching and conditional loading.
• Mutation patterns: Manage mutations with namespaced hooks or render-prop Mutation components to support conditional and looped mutation flows without breaking Hooks rules.
• Prefetch and composition: Preload optional data on user intent with prefetch wrappers and compose multiple API calls into a single query function using Promise.all when appropriate.
• Use case: Convert an orders detail route that currently waterfalls into a route that prefetches order and items in the loader and renders both via SuspenseQueries so the page becomes fast and resilient.

Quick Start

Convert your /orders/$orderId route to use a loader that calls ensureQueryData for order and items, provide queryClient via router context, and read data in the component with SuspenseQueries so both requests load in parallel.