API Client Organization

Scattering API calls throughout components is hard to maintain. A centralized API client module keeps all your server communication in one place.

Creating an axios instance

An axios instance has a base URL and default configuration — you don’t repeat the base URL on every call:

src/api/client.ts

import axios from 'axios'
import { API_BASE_URL } from '../config'

export const apiClient = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
})

Adding the auth token interceptor

The interceptor runs before every request and adds the JWT if one is stored:

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

// Handle 401 responses globally
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Token expired or invalid — clear it
      localStorage.removeItem('bulletin_token')
      localStorage.removeItem('bulletin_user')
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

Typed API functions

Rather than calling apiClient.get('/posts') everywhere, define typed functions:

src/api/posts.ts

import { apiClient } from './client'
import type { Post, PostsResponse, CreatePostInput } from '../types/api'

export const postsApi = {
  list: (params?: { sort?: string; page?: number; limit?: number }) =>
    apiClient.get<PostsResponse>('/posts', { params }),

  get: (id: number) =>
    apiClient.get<Post>(`/posts/${id}`),

  create: (data: CreatePostInput) =>
    apiClient.post<Post>('/posts', data),

  delete: (id: number) =>
    apiClient.delete(`/posts/${id}`),

  toggleUpvote: (id: number) =>
    apiClient.post<{ upvoted: boolean; upvotes: number }>(`/posts/${id}/upvote`),
}

src/api/auth.ts

import { apiClient } from './client'
import type { AuthResponse, LoginInput, RegisterInput } from '../types/api'

export const authApi = {
  register: (data: RegisterInput) =>
    apiClient.post<AuthResponse>('/auth/register', data),

  login: (data: LoginInput) =>
    apiClient.post<AuthResponse>('/auth/login', data),
}

Using the API client in components

import { postsApi } from '../api/posts'

function PostFeed() {
  const [posts, setPosts] = useState<Post[]>([])

  useEffect(() => {
    postsApi.list({ sort: 'newest', limit: 20 })
      .then(({ data }) => setPosts(data.posts))
      .catch(console.error)
  }, [])
  // ...
}

Clean, typed, and all server communication in one place.

Type definitions

src/types/api.ts

export interface Post {
  id: number; title: string; body: string
  user_id: number; upvotes: number; created_at: string
  author_username: string
}

export interface PostsResponse {
  posts: Post[]; total: number; page: number; limit: number
}

export interface Comment {
  id: number; body: string; user_id: number
  post_id: number; created_at: string; author_username: string
}

export interface User {
  id: number; username: string; bio: string | null
  created_at: string; postCount: number
}

export interface AuthResponse {
  token: string; userId: number; username: string
}

export interface CreatePostInput { title: string; body: string }
export interface LoginInput { username: string; password: string }
export interface RegisterInput { username: string; password: string }

Exercise

1. Create src/api/client.ts, src/api/posts.ts, src/api/auth.ts, and src/types/api.ts.
2. Replace your direct axios.get calls from the previous lesson with postsApi.list().
3. Add the auth interceptor — confirm it attaches Bearer headers when a token is in localStorage.
4. What does the 401 interceptor do? When would it trigger?

Recap

• An axios instance with baseURL eliminates repeating the URL on every call.
• Interceptors add auth headers to all requests and handle 401 responses globally.
• Typed API functions keep all server communication in one place and provide TypeScript safety.
• src/types/api.ts defines TypeScript interfaces matching the API’s JSON response shapes.