이 컴포넌트가 잘 나타났다면, 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 (commentId ) => { (commentId); (true); }; const () => { (false); remove({ id: selectedCommentId!, // null이 아님을 명시하기 위하여 ! 사용 articleId: id, }); }; ( )
이제 댓글을 삭제해보세요. 댓글이 잘 삭제되나요?