API‐and‐Data‐Fetching - toyo12312/lumina-staff-suite-frontend GitHub Wiki

# API & Data Fetching 🌐

The frontend communicates with our NestJS backend via a dedicated API service layer. This abstraction ensures that our UI components remain clean and unaware of HTTP logic.

## Axios Instance & Interceptors
We use an Axios instance configured with base URLs and interceptors. This allows us to handle JWT Authentication automatically.

* **Request Interceptor:** Automatically attaches the `Authorization: Bearer <token>` header to every outgoing request.
* **Response Interceptor:** Global error handling. If the backend returns a `401 Unauthorized` (expired token), the interceptor can trigger a token refresh flow or force a logout.

## Shared DTOs and Types
To maintain strict end-to-end type safety, we share TypeScript interfaces between the NestJS backend and the React frontend. 
// Example API call inside a service
import api from './api.instance';
import { IUser } from '../common/interfaces/user.interface';

export const fetchUserProfile = async (): Promise<IUser> => {
  const response = await api.get('/users/profile');
  return response.data;
};
⚠️ **GitHub.com Fallback** ⚠️