[react] fetch된 데이터가 변경된 후, 새로운 데이터를 가져오려면?

 

 

댓글 등록, 수정, 삭제 후에 새로고침을 하지 않고 변경된 데이터를 적용하려면 일반적으로 다음과 같은 방법들이 있다.

1. API를 호출한 것이 성공했을 때 클라이언트 데이터를 기존 데이터에 추가한다.
2. API를 호출한 결과로 추가시에는 해당 댓글 부분의 객체를 backend 서버로 부터 response로 전달받아서 클라이언트에서 추가한다. (수정, 삭제시에는 1번과 같음)
3. react-query를 사용하고 있다면 success 메서드를 활용한다.

 const postMutation = useMutation(postComment, {
    onSuccess: () => {
      // 댓글 등록 후 쿼리 무효화
      queryClient.invalidateQueries(['comments']);
    },
  });