더북(TheBook)

이 컴포넌트가 잘 나타났다면, onConfirmRemove 함수를 마저 구현해줍시다. useMutation으로 deleteComment API 함수를 호출하도록 구현하고, 댓글 삭제 성공 후 useQueryClient로 댓글 목록을 갱신해주세요.

screens/ArticleScreen.tsx

import {deleteComment, getComments} from '../api/comments';
import {useMutation, useQuery, useQueryClient} from 'react-query';
import {Comment} from '../api/types';

(...)

const queryClient = useQueryClient();
const {mutate: remove} = useMutation(deleteComment, {
  onSuccess: () => {
    queryClient.setQueryData<Comment[]>(['comments', id], (comments) =>
      comments ? comments.filter((c) => c.id !== selectedCommentId) : [],
    );
  },
});

const onRemove = (commentId: number) => {
  setSelectedCommentId(commentId);
  setAskRemoveComment(true);
};

const onConfirmRemove = () => {
  setAskRemoveComment(false);
  remove({
    id: selectedCommentId!, // null이 아님을 명시하기 위하여 ! 사용
    articleId: id,
  });
};

(...)

이제 댓글을 삭제해보세요. 댓글이 잘 삭제되나요?

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.