[React] useInfiniteQuery로 페이지네이션 적용하고 난 후 데이터 깜빡임 현상

페이지네이션 적용하고 난 후 Cache된 데이터가 보이는 현상

처음에는 removeQueries key값 하나만 주고, 댓글을 삭제하면 Cache된 곳에서 대댓글을 다 삭제하게 로직을 재구성했었다.

곰곰히 생각해보니, 상관없는 Cache된 데이터도 삭제해버리니, 정작 react-query의 이점을 제대로 못 적용하고 있다고 생각이 들었고, 다른 기록의 댓글을 클릭하니깐 약간 깜빡임처럼 기존의 댓글이 보이는 현상을 확인 할 수 있었다.

 

 

 

 

해결 방안

id값을 key값으로 인자를 더 넣어주어서 해당 id만 Cache된 데이터만 삭제하게 해주었다. 그리고 invalidateQueies를 적용하여 대댓글을 다시 불러오게 설정을 해주었다.

const useNewCommentDeleteMutation = ({ recordId, commentId }: Props) => {
  const queryClient = useQueryClient();
  return useMutation(deleteNewComment, {
    onSuccess: () => {
      queryClient
        .invalidateQueries([COMMENT_API_KEY.NEW_COMMENT, { recordId }])
        .then(() => {
          queryClient.removeQueries([
            COMMENT_API_KEY.REPLY_COMMENT,
            { commentId },
          ]);
          queryClient.invalidateQueries([COMMENT_API_KEY.REPLY_COMMENT]);
        });
    },

    /** @TODO 나중에 error boundary 추가 */
    onError: (e) => console.log(e),
  });
};