axios + useQuery 똑똑하게 쓰기

발단

카카오테크캠퍼스 울 팀원 분의 과제를 도와주는데, 뭔가 이상한 점이 있었다.

useQuery에 사용하는 api 호출 함수에서 async await을 사용하지 않는 것이었다. 그리고 정상적으로 작동하고 있었다.

문제

// 1번
export const apiCall = (method, path, data) => {
    return axios({method, url: API_PREFIX + path, data})
        .then(resp => resp.data)
};

// 2번
export const apiCall = async (method, path, data) => {
    const response = await axios({method, url: API_PREFIX + path, data})
    return response.data
};

제가 여태 알던 것은 위의 두 가지와 같은 형태가 리액트 쿼리의 함수로 들어가야한다고 알고 있었는데, 밑의 코드 또한 리액트 쿼리에 의해 자동으로 정상작동 한다.. 라고 이해하면 맞을까요??

export const apiCall = (method, path, data) => {
    const response = axios({method, url: API_PREFIX + path, data})
    return response
};

위의 내용은 내가 2단계 질문 방에 올린 내용이었다.

나는 axios의 요청을 기다리다가 response에 undefined 값이 들어와서 그대로 리턴될 줄 알았다.

내 생각엔 비동기적으로 처리하는 과정에서 axios 처리는 따로 하고, 그렇다면 response는 아직 undefined일 테고, 정상적인 값이 반환되면 안 되지 않나?
리액트 쿼리가 undefined를 처리하는게 가능한가? 싶었다.
https://stackoverflow.com/questions/70388520/why-are-async-api-calls-necessary-with-react-query

Why are async api calls necessary with react-query?

스택오버플로우에서 비슷한 글을 찾았으나, 역시 나처럼 사용하고 있었다. 나는 내가 맞는 줄 알았다.

해결

axios에 의해 리턴되는 값은 Pending 상태의 Promise 였다.

async await을 통해 비동기 처리를 해주면 해당 값이 제대로 출력되며, 비동기 처리를 해주지 않아도 Promise를 반환하는 것이었다!!

그리고 Pending 상태의 Promise를 React Query에서 처리해주는 것이었다.

 

axios가 프로미스를 리턴한다는 것은 어떻게 보면 매우 당연한 것이었는데, 프로미스에 대한 이해가 많이 떨어졌던 것 같다.

이젠 완벽 이해했다. return new Promise((resolve, reject) => {...})의 형태도 왜 이렇게 생긴 건지 이해해버렸다....... 매우 값진 하루이다.