TypeScript 환경에서 axios 타입 셋팅하기 (React, Next.js, React Native, node.js, ...)

Setting up axios types in a TypeScript environment (React, Next.js, React Native, node.js, ...)

npm install axios

import axios, {
  AxiosError,
  AxiosResponse,
  InternalAxiosRequestConfig,
} from "axios";

import axios from 'axios';
 
export const API = axios.create({
  baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

export const AuthStorage = {
  async setToken( accessToken: string ) {
    await localStorage.setItem("accessToken", accessToken);
  },
 
  async getToken(): Promise<string | null> {
    return await localStorage.getItem("accessToken");
  },
 
  async clear() {
    await localStorage.removeItem("accessToken");
  },
};

API.interceptors.request.use(
  async (config: InternalAxiosRequestConfig) => {
    const token = await AuthStorage.getToken(); // 토큰 미사용시 무시
    if (token) {	// 토큰 사용시 헤더에 토큰 추가
      config.headers.Authorization = `Bearer ${token}`;
    }
    console.log({
      headers: config.headers,
      method: config.method,
      url: config.url,
      baseUrl: config.baseURL,
      data: config.data,
      params: config.params,
    });
    return config;
  },
  (error: AxiosError) => {
    console.log("API request error", error.config);
    return Promise.reject(error);
  }
);

API.interceptors.response.use(
	(response: AxiosResponse) => {
		console.log({
			status: response.status,
			statusText: response.statusText,
			data: response.data,
		});
		return response.data;	// 서버에서 받는 데이터가 data 속성에 들어있는 경우
		// return response.data.data;	// 서버에서 받는 데이터가 data.data 속성에 들어있는 경우
	},
	async (error: AxiosError) => {
		console.warn(error.config?.url + " API response error", {
			response_data: error.response?.data,
			status: error.response?.status,
			request_info: {
				method: error.config?.method,
				url: error.config?.url,
				baseUrl: error.config?.baseURL,
				headers: error.config?.headers,
				params: error.config?.params,
				data: error.config?.data,
			},
		});
		const errorData: Shared.ErrorResponse = error.response?.data as Shared.ErrorResponse;
		alert(`${errorData.error.code}: ${errorData.error.message}`);
		return Promise.reject(error);
	}
);

{
  "data": null,
  "error": {
    "code": 400,
    "message": "Bad Request"
  },
  "success": false
}

/* eslint-disable @typescript-eslint/no-unused-vars */
namespace Shared {
  export interface ErrorResponse {
    data: null;
    error: {
      code: number;
      message: string;
    };
    success: boolean;
  }
}

/* eslint-disable @typescript-eslint/no-unused-vars */
namespace Shared {
  export interface ErrorResponse {
    data: null;
    error: {
      code: number;
      message: string;
    };
    success: boolean;
  }
 
  export interface messageResponse {
    message: string;
  }
 
  export interface Pagenation {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    content: any;
    pageable: Pageable;
    totalPages: number;
    totalElements: number;
    last: boolean;
    size: number;
    number: number;
    sort: Sort;
    first: boolean;
    numberOfElements: number;
    empty: boolean;
  }
 
  interface Pageable {
    sort: Sort;
    pageNumber: number;
    pageSize: number;
    offset: number;
    paged: boolean;
    unpaged: boolean;
  }
 
  interface Sort {
    sorted: boolean;
    unsorted: boolean;
    empty: boolean;
  }
}

declare namespace TestRequest {
	export interface GetPostsParams {
		id: number;
	}
	export interface GetPostsQuery {
		userId: number;
	}
	export interface PostPostsBody {
		title: string;
		body: string;
		userId: number;
	}
}

declare namespace TestResponse {
	export interface GetPosts {
		id: number;
		title: string;
		body: string;
		userId: number;
	}
}

import { API } from "../axios";
 
export const TestService = () => {
  const url = "/posts";
 
  /**
   * 포스트 상세 조회 - id 별 조회
   * @api-doc: https://jsonplaceholder.typicode.com/guide/
   */
  const getPosts = async (
    params: TestRequest.GetPostsParams,
    { userId }: TestRequest.GetPostsQuery,
  ) => {
    const response = (await API.get(`${url}/${params.id}`, {
      params: { userId },
    })) as TestResponse.GetPosts;
    return response;
  };
 
  /**
   * 포스트 전체 조회
   * @api-doc: https://jsonplaceholder.typicode.com/guide/
   */
  const getAllPosts = async () => {
    const response = (await API.get(`${url}`)) as TestResponse.GetPosts[];
    return response;
  };
 
  /**
   * 포스트 생성
   * @api-doc: https://jsonplaceholder.typicode.com/guide/
   */
  const postPosts = async (body: TestRequest.PostPostsBody) => {
    const response = (await API.post(`${url}`, body)) as TestResponse.GetPosts;
    return response;
  };
 
  return {
    getPosts,
    getAllPosts,
    postPosts,
  };
};
 

export { TestService } from "./service/test";

"use client";
 
import { TestService } from "@/util/apis";
import { useEffect, useState } from "react";
 
export default function TestPage() {
	const [posts, setPosts] = useState<TestResponse.GetPosts>();
	const [getAllPosts, setGetAllPosts] = useState<TestResponse.GetPosts[]>();
	const [postPosts, setPostPosts] = useState<TestResponse.GetPosts>();
 
	useEffect(() => {
		const fetchPosts = async () => {  // 포스트 상세 조회
			const response = await TestService().getPosts({ id: 1 }, { userId: 1 });
			setPosts(response);
		};
		
		const fetchAllPosts = async () => {  // 포스트 전체 조회
			const response = await TestService().getAllPosts();
			setGetAllPosts(response);
		};
 
		const postPosts = async () => {  // 포스트 생성
			const response = await TestService().postPosts({ title: "test123", body: "test123", userId: 1 });
			setPostPosts(response);
		};
 
		fetchPosts();
		fetchAllPosts();
		postPosts();
	}, []);
 
	return (
		<div>
			<div>Test</div>
			<div>{posts?.title}</div>
			{getAllPosts?.map((post) => (
				<div key={post.id}>{post.title}</div>
			))}
			<div>{postPosts?.title}</div>
		</div>
	);
}