API Integration

Overview

API integration is the frontend contract with backend services, including requests, responses, retries, and error handling.

Why It Matters

Most product behavior depends on data shape, latency, and failure handling across the API boundary.

Core Concepts

• Treat the response as an external contract.
• Handle loading, success, empty, and error states.
• Validate assumptions about shape and status codes.

Mental Models

The frontend should adapt to the API, but not silently accept ambiguous data.

Best Practices

• Centralize request logic when it repeats.
• Map API data to UI data at the boundary.
• Handle retries and cancellation deliberately.

Common Mistakes

• Spreading fetch logic across components.
• Trusting the response shape without checks.
• Ignoring timeout and failure states.

Trade-offs

Thin wrappers are easy to write, but they can become hard to change if every component depends on raw API details.

Decision Framework

flowchart TD
  A[Need data] --> B{Shared across screens?}
  B -->|Yes| C[Centralize fetch layer]
  B -->|No| D[Local request]
  C --> E[Map to UI model]
  D --> E

Examples

async function loadUsers() {
  const res = await fetch("/api/users");
  if (!res.ok) throw new Error("Failed to load users");
  return res.json();
}

Checklists

• Is the request and response shape clear?
• Are errors and empty states handled?
• Is API data mapped before it reaches the view?

Senior Engineer Notes

Senior engineers make the API boundary explicit. That boundary is where surprise belongs to be reduced, not hidden.

Further Reading

• HTTP
• State Management
• Testing Strategy