문제 화면

invalidateQueries

파라미터로 넣어준 쿼리키에 해당하는 쿼리를 명시적으로 stale 하다고 알려주고, 해당 쿼리 데이터를 새로 받아온다. ( refetch )

refetch() 와 다른 점

refetch() 는 데이터의 stale 함과 상관 없이 & 쿼리에 대한 observer 가 없더라도 항상 refetch 하지만,
invalidateQueries 는 기존 데이터를 stale 로 변경 후 마운트되어야 refetch 가 동작한다고 한다.

마주한 문제점

삭제 버튼을 눌렀을 때 최종 삭제를 확인하는 confirm modal 이 뜨고, 확인 버튼을 눌렀을 때 delete 쿼리를 날리는 구조를 짰다.
모달창을 보여주는 값을 state 로 관리했는데, 확인 버튼을 누르면 해당 state 를 false 로 바꾸고 모달을 닫는 구조였다.

기존 코드

// 모달창 내부 삭제 버튼 클릭시 동작하는 메소드
const handleAgreeDelete = async () => {
    await deleteIdList.forEach(async (id) => {
      await useDelete.mutateAsync(id);
    });
    
	queryClient.invalidateQueries(KEY_PRODUCT_LIST);
    handleCloseDelete();
  };
 
// 삭제 할 id 리스트를 리셋 & 모달 닫기
 const handleCloseDelete = () => {
    setDeleteIdList([]);
    setOpenModal(false);
  };

그러나 쿼리는 refetch 되지 않았다......
한참을 삽질하다가, mutation 이 끝나기 전에 해당 ui 가 unmount 되면 제대로 동작하지 않는다는 글을 봤다.

수정 코드

const handleAgreeDelete = async () => {
    await deleteIdList.forEach(async (id) => {
      await useDelete.mutateAsync(id, {
        onSuccess: () => {
        // 콜백 부분에 쿼리키 무효화를 실행
          queryClient.invalidateQueries(KEY_PRODUCT_LIST);
        }
      });
    });

    handleCloseDelete();
  };

이렇게 하니 정상적으로 쿼리키가 무효화되고, 모달창이 닫히면서 아래쪽 화면이 refocusing -> stale 한 쿼리를 refetch 했다!

명심하자.... unmount 를 조심해...
그리고 모든 것은 비동기라는 것을........

참고글

참고 블로그
블로그에서 참고한 원문