[Next.js] Axios delete 요청에서 타입 오류 해결기

React 프로젝트에서 Axios를 사용해 delete 요청을 보냈을 때, 다음과 같은 타입 오류가 발생했다.

개체 리터럴은 알려진 속성만 지정할 수 있으며  
'AxiosXHRConfigBase<unknown>' 형식에 'data'가 없다.

분명히 post, put 요청에서는 data를 넣어도 문제가 없었는데, delete에서만 타입 오류가 났다.

문제 원인

Axios의 delete 메서드 시그니처는 내부적으로 AxiosRequestConfig를 기대하고 있었는데, TS 버전 및 Axios 타입 정의 문제로 인해 delete의 두 번째 인자가 data를 허용하지 않는 형태로 되어 있었다.

즉, delete에서 data를 직접 넣으면 타입 정의 상 충돌이 발생하는 상황이었다.

해결 과정

처음에는 단순히 delete("/item", { data: { id: 1 } }) 형태로 요청을 보냈다.

그러나 위 오류가 발생했기 때문에 data 속성을 직접 넘길 수 없었다.

문제를 뒤지다 보니 Axios 내부에서 쓰이는 타입 중 InternalAxiosRequestConfig라는 게 있었다.

이 타입은 delete 요청에서도 data 속성을 안전하게 받을 수 있게 정의되어 있었다.

이 문제를 해결하기 위해 InternalAxiosRequestConfig 타입을 사용했다.

import { InternalAxiosRequestConfig } from "axios";

const response = await api_access.delete("/item", {
  data: { id: 1 },
} as InternalAxiosRequestConfig);

이렇게 캐스팅하니 data 속성을 문제 없이 전달할 수 있었다.

추가 고려: 쿼리스트링 활용

사실 delete 요청은 REST 관례상 쿼리스트링으로 자원을 식별하는 경우가 많다.

예를 들어 다음과 같이 작성하는 방식이다.

await api_access.delete(`/item?id=${id}`);

이 경우에는 굳이 data를 넣지 않아도 되며, 서버에서 쿼리 파라미터로 처리하면 된다.

즉, 단순 삭제라면 쿼리스트링이 더 깔끔한 접근일 수 있다.

결론

• delete 메서드에서 data를 넘기면 타입 오류가 발생했다.

• InternalAxiosRequestConfig 타입을 이용해 해결했다.

• 다만 상황에 따라 쿼리스트링을 활용하는 것이 더 RESTful한 방식일 수 있다.