integration-api

API Integration

Connect a React frontend to backend APIs using Axios for HTTP, React Query for caching, and Socket.IO for real-time updates.

When to Use

• User needs to set up an HTTP client with Axios
• User wants to create a service layer for API calls
• User needs React Query hooks for data fetching and mutations
• User wants to add real-time WebSocket updates
• User needs to handle API errors, retries, and loading states

Available Operations

1. Configure Axios client with base URL, timeouts, and interceptors
2. Create a typed service layer for API endpoints
3. Build React Query hooks with cache management
4. Set up WebSocket connections with Socket.IO
5. Handle error states, retries, and optimistic updates

Multi-Step Workflow

Step 1: Install Dependencies

npm install axios @tanstack/react-query socket.io-client
npm install -D @tanstack/react-query-devtools

Step 2: Configure Axios HTTP Client

// src/lib/api.ts
import axios from 'axios';

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Add auth token to every request
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Unwrap response data and handle errors
api.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error.response?.data || error);
  }
);

Add the API URL to your environment:

# .env.local
VITE_API_URL=http://localhost:8000/api/v1

Step 3: Create Typed Service Layer

// src/services/itemApi.ts
import { api } from '@/lib/api';

export interface Item {
  id: string;
  title: string;
  description: string;
  status: 'pending' | 'in_progress' | 'completed';
  priority: 'low' | 'medium' | 'high';
  createdAt: string;
}

export interface PaginatedResponse<T> {
  items: T[];
  total: number;
  page: number;
  size: number;
}

export interface CreateItemDto {
  title: string;
  description: string;
  priority: 'low' | 'medium' | 'high';
}

export const itemApi = {
  list: (params?: { page?: number; size?: number; status?: string }) =>
    api.get<PaginatedResponse<Item>>('/items', { params }),

  get: (id: string) =>
    api.get<Item>(`/items/${id}`),

  create: (data: CreateItemDto) =>
    api.post<Item>('/items', data),

  update: (id: string, data: Partial<CreateItemDto>) =>
    api.put<Item>(`/items/${id}`, data),

  delete: (id: string) =>
    api.delete(`/items/${id}`),
};