[react-query] useMutation 후 invalidate해도 refetch가 동작하지 않는 문제

문제점

react-query에서 useMutaion을 진행한 후에 queryCient.invalidateQueries() 사용하면 정삭적으로 해당 key에 대해 다시 fetching을 해온다고 했는데, 작동하지 않았음.

배경지식

// profile modal에서
  const queryClient = useQueryClient();
  const config = { //이미지 전송을 위해서
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  };
  const mutation = useMutation(data => {
    return axiosInstance.post('/profile/setting', data, config);
  });


const profileUpdateSubmit = async data => {
    console.log(data);
    console.log(loadedProfileImage);

  	// form data를 update하려는 내용에 맞추어서 만들어 냄.
    const formData = new FormData();
    if (data.nickname) formData.append('nickname', data.nickname);
    if (data.introduction) formData.append('introduction', data.introduction);
    if (loadedProfileImage.imageBlob) {
      formData.append('file', loadedProfileImage.imageBlob);
    } else {
      formData.append('file', {});
    }

    mutation.mutate(formData, {
      onSuccess: formData => {
        closeModal(); // 해당 mutation이 끝나기 전에 이 컴포넌트 unmount 되면 callback not fire!!!
        return queryClient.invalidateQueries(['profile', `${userID}`]); // 'return' wait for invalidate
      },
      onError: err => {
        console.log(err);
      },
      //error success 상관 없이
      // onSettled: data => {
      //   return queryClient.invalidateQueries(['profile', `${userID}`]);
      // },
    });
  };

해결방법

mutation.mutate의 후속 작업(callback)은 작업이 이루어지는 해당 컴포넌트가 unmount되면 (이 경우에선 모달이 닫히면) 정상 작동하지 않는다고 한다. (callbacks on mutate might not fire at all)
그래서 모달을 닫는 closeModal을 callback에 배치하였고(기존에는 submit button 클릭하면 바로 닫히게 했었다), return문도 넣어서 invalidate 작업도 기다리게 해주었따.

참고
https://tkdodo.eu/blog/mastering-mutations-in-react-query