Include practical code snippets (e.g., getUsers, useUsers, UserList) to demonstrate how the layered architecture operates in practice.

Transform API data in the service/domain layer rather than in components to keep transformation logic centralized and reusable.

Layer TanStack Query on top of the service layer to manage server state while preserving clear layer responsibilities.

Support multiple backend services with separate API clients (e.g., customerApi, paymentApi) when configurations differ, maintaining clean separation of concerns.

Implement a centralized ApiError model and normalize backend errors to present consistent user-facing messages, handling common statuses (401, 403, 500) with appropriate flows, including token refresh mechanics.

Use request cancellation via AbortController to drop unnecessary requests and apply careful, idempotent-only retries; avoid retries for non-idempotent actions like payments.

Define a token refresh workflow that prevents multiple concurrent refreshes and coordinates pending requests during 401 responses.

Implement request interceptors to attach auth tokens and response interceptors to normalize errors, with added capabilities for logging and central error handling.

Adopt TypeScript typings for API requests and responses, providing interfaces for entities such as User and CreateUserRequest to gain compile-time safety.

Adopt a single API client pattern with a centralized Axios instance (api) featuring baseURL, timeout, and shared configuration for consistency across services.

In large React apps, organize API calls into a layered architecture—component, custom hook, service layer, and API client—to boost maintainability and scalability.

Layering details: keep UI in the Component layer, React behavior in a Custom Hook that connects to the Service Layer, the Service Layer handles backend communication, and an API Client centralizes HTTP configuration and client instances.