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

Ell!·2021년 10월 21일
8

react

목록 보기
1/28

문제점

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

profile
더 나은 서비스를 고민하는 프론트엔드 개발자.

3개의 댓글

comment-user-thumbnail
2021년 11월 22일

형님 감사합니다 덕분에 해결 ^^

답글 달기
comment-user-thumbnail
2022년 4월 20일

한 사람의 생명을 구했습니다 . .

답글 달기
comment-user-thumbnail
2022년 5월 12일

이 로직이 모달창에서 도는거였군요 ㅎㅎ 덕분에 꿀팁얻어갑니다
(난독증때문에 컨펌창에도 영향이 있나했네요)

답글 달기