오늘의 교훈: 빠르게 실패하고 구글링을 통해 공식문서 읽기

개발자라면 숱하게 경험해봤을 일이지만 오늘따라 새삼스럽게 즐거워서 적어보았다.

3개의 API를 폭포수 방식으로 호출해야 할 일이 있었다. 나는 이전에 이런 식으로 API 호출을 한 적이 없었기 때문에 당황했다. 회사에서는 리액트 쿼리(비동기 상태 관리 라이브러리)를 사용하는데, 일단 이전에 사용했던 방식으로 작성해봤다.

const firstMutation = useMutation(
  (data) => service.createFirst(data),
  {
    onSuccess: () => {
      secondMutation.mutate(something)
    }
  },
)
const secondMutation = useMutation(
  (data) => service.createSecond(data),
  {
    onSuccess: () => {
      thirdMutation.mutate(something)  
    }
  },
)
const thirdMutation = useMutation((data) => service.createThrid(data))

firstMutation.mutate(something)

그랬는데 동작을 안 한다. 오잉? 무슨 일이지? 내가 react query를 잘못 사용하고 있는 건가.

그래서 구글링을 해봤다. react query waterfall 이런 키워드로 검색했다. 분명히 누군가 같은 질문을 했을 것 같았는데 찾을 수 없었다.

그렇다면 이제는 어떡하나? useMutation 공식 문서를 잘 읽는 수밖에. 그리고 금방 찾아냈다. mutateAsync 였다.

await firstMutation.mutateAsync(something)
await secondMutation.mutateAsync(something)
await thirdMutation.mutateAsync(something)

Promise의 콜백 패턴을 쓰다가 async/await을 쓴 것처럼 깔끔해졌다.

이 경험을 통해 좋았던 점은 일련의 과정(실패, 탐색, 변화, ...(반복)... 성공!)이 빠르게 실행됐다는 점이다. 15분도 걸리지 않았다. 물론 처음에 onSuccess 안에서 왜 mutate 호출이 되지 않는지 원인을 찾는 것도 좋았겠다(이제부터 알아볼 것이다). 바로 구글링 한 다음 공식 문서를 읽고 다른 확실한 방법을 찾았던 과정이 인상 깊게 남았다.