파라미터로 넣어준 쿼리키에 해당하는 쿼리를 명시적으로 stale 하다고 알려주고, 해당 쿼리 데이터를 새로 받아온다. ( 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 를 조심해...
그리고 모든 것은 비동기라는 것을........