이 컴포넌트가 잘 나타났다면, 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,
      });
    };
    
    (...)

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

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