⬅️ Back to Frontend Architecture Index

Data Access

1️⃣ Section Purpose

This section documents how the frontend talks to the backend and how API responses are shaped into UI-ready data.

The goal is to make data access: - predictable (consistent layering and query keys) - resilient (tolerant parsing and user-friendly errors) - testable (API logic stays out of components)

2️⃣ Scope & Boundaries

Included: - The shared HTTP client and cross-cutting request/response behavior - Domain API modules under frontend/src/api/* (inventory, suppliers, analytics) - Parsing/normalization utilities (envelopes, type guards, field pickers) - React Query hooks (query keys, caching, conditional fetching)

Excluded: - Authentication UI flows and route-guards (see Routing) - Global app state providers (see State) - UI component details (see UI Components)

3️⃣ High-Level Diagram

graph LR UI["Pages / Components"] --> Hooks["React Query hooks\n(src/api/**/hooks)"] Hooks --> Fetchers["Fetchers / mutations\n(domain modules)"] Fetchers --> Http["httpClient (Axios)"] Http --> Backend["Backend API"] Backend --> Http Http --> Parse["Envelope extraction\n+ normalization"] Parse --> Hooks

Contents

⬅️ Back to Frontend Architecture Index