리액트 쿼리 useMutation.mutate 의 callback들은 컴포넌트가 언마운트 되었을 때 실행이 안된다.

[dev-hobin]

오늘 리스트 아이템의 마지막 아이템을 삭제했을 때 아이템 삭제는 정상적으로 되었지만 아이템을 삭제할 것이냐는 경고창과 전역 로딩창이 없어지지 않고 유지되는 에러가 있었다.

문제를 확인해보니 마지막 아이템이 언마운트되어 mutate 에 달아두었던 callback들도 호출이 안된 것이었다.

const deleteMutation = useMutation({...});

deleteMutation.mutate({ ... }, {
    // 사용중인 곳에서 컴포넌트 언마운트 되면 호출 안된다.
    onSuccess: () => {
      toast.show(...);
      hideAlert();
    },
    onError: (err) => {
      toast.show(...);
    },
    onSettled: () => {
      hideGlobalLoading()
    }
})

https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire Tkdodo 글에서도 자세히 설명하고 있다.

그럼 mutate의 콜백을 사용할 경우에는 이 컴포넌트가 mutation 상황에서 언마운트되지 않을 것이라는 확신이 있어야 하거나 콜백이 호출되지 않더라도 크게 문제 없는 콜백들이 들어가야 한다.

음... 불편하다. mutate 를 자신있게 쓸 수 있는 케이스가 많이 없어보인다.

일단 문제 해결은 useMutation의 인자로 콜백을 등록하여 반드시 콜백이 호출되는 방식으로 해결했다.

const deleteMutation = useMutation({
    ...,
    onSuccess: () => {
      ...생략
      toast.show(...);
      hideAlert();
    },
    onError: (err) => {
      ...생략
      toast.show(...);
    },
    onSettled: () => {
      ...생략
      hideGlobalLoading()
    }
});

그냥 위와 같이 쓰거나

mutateAsync를 써서 try-catch 방식을 사용하면 콜백이 무시되지 않고 반드시 실행할 수 있었던 것으로 기억하고 있는데,, mutation api 를 어떤 방식으로 활용할지는 상황에 따라 달라질 수 있으므로, 적재적소에 맞는 활용 방안에 대한 추가적인 고민이 필요할 거 같다.

팀 차원에서는 반드시 콜백이 호출되는 하나의 방식으로 컨벤션을 맞추는 게 좋을 수도 있겠다.

[milooy]

아하.. useMutation 의 콜백은 살아남지만 mutate함수는 언마운트 되었을때 살아남지 못하는 케이스군요
배워가요