[에러해결] 푸시 알람으로 페이지 진입 후 댓글 작성 시 반영안됨 (queryClient.invalidateQueries 사용)

🐞 문제상황

푸시 알람으로 페이지 진입한 후 댓글 작성 시 작성한 댓글이 반영되지 않음

댓글 작성후에는 리액트 쿼리의 쿼리 무효화로 댓글 정보가 리패치 된다

  const { mutate: postComment } = useMutation({
  // ..
  
    onSuccess() {
      queryClient.invalidateQueries({
        queryKey: [type, 'detail', idx, isLogin],
      });
      queryClient.invalidateQueries({ queryKey: ['comment'] });
    },
  })

 

 

 

💡 해결과정

이것저것 시도해보다가

1. 푸시 알람으로 페이지 진입 시 queryClient.getQueryData가 undefined라는 걸 알게됨

 

2. 댓글 정보를 가져올 때 글의 idx를 전역상태에 저장하는데, 전역상태에서 받아오는 idx를 props에서 받아오는 걸로 변경시켰더니 getQueryData가 받아와지고, 댓글 작성시 반영도 정상적으로 됐다. (하지만 전역상태의 idx와 props의 idx는 동일하다)

 

3. 전역상태에서 받아오는 idx와 props의 idx의 타입을 비교해봤을 때 각각 number와 string이었다. 푸시 알람에서 받아오는 idx는 string으로 받아와져서 쿼리가 달랐던 것

 

배경지식) queryClient.invalidateQueries

queryClient.invalidateQueries는 캐시를 무효화하는 함수이다. 캐시를 무효화한다는 것은 데이터의 상태를 fresh(신선한) 상태에서 stale(오래된) 상태로 표시하는 것이다. 데이터가 stale 상태이면서 해당 쿼리가 화면에 마운트되어 있을 때(useQuery를 사용할 때) refetch가 트리거 된다.

 

그런데 왜 refetchQueries가 아닌 invalidateQueries를 사용할까? 이 두개의 차이가 뭘까?

retetch는 지금 당장 데이터 새로 불러오기 라면 invalidate는 캐시를 무효화시킨 뒤 필요할 때 다시 불러오기이다.

지금 댓글 작성 후 바로 데이터를 불러와야하는 나의 상황에서는 refetchQueries가 더 잘 맞다.

 

 

 

✏️ 결과

  const { idx, mypage } = route.params;
  const numIdx = Number(idx); // 푸시로 받는 idx는 string이므로 숫자로 변환
  
  const { data } = useQuery({
  // ..
    setIdx(res.IDX);
  })

 

params로 받는 idx를 number로 처리하고 전역상태에 저장한다

 

 

.

 

리패치와 무효화의 차이점을 알게되어 다음에 어떻게 사용하는 것이 좋은지 알게 되었다. 그리고 타입을 미리 알았더라면 조금 더 빨리 해결했을 에러같아서 디버깅을 할때 좀 더 효율적으로 할 수 있는 방법을 찾아야겠다는 생각을 했다.