deleteComment

들어가기
내가 만든 댓글(Comment)를 지우는 코드,
createComment에서 newCacheComment를 만들어서 evict로
쉽게 내가 단 댓글을 바로 지울 수 있음.

### 1. src/components/feed/Comment.js

import styled from 'styled-components'
import { FatText } from '../shared'
// import sanitizeHtml from 'sanitize-html'
import React from 'react'
import { Link } from 'react-router-dom'
import { gql, useMutation } from '@apollo/client'

const DELETE_COMMENT_MUTATION = gql`
  mutation deleteComment($id: Int!) {
    deleteComment(id: $id) {
      ok
    }
  }
`
///1. DELETE_COMMENT_MUTATION을 만든다.

const CommentContainer = styled.div`
  margin-bottom: 7px;
`
const CommentCaption = styled.span`
  margin-left: 10px;
  a {
    background-color: inherit;
    color: ${(props) => props.theme.accent};
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
`

function Comment({ author, payload, id, photoId, isMine }) {
  // const cleanedPayload = sanitizeHtml(
  //   payload.replace(/#[\w]+/g, '<mark>$&</mark>'),
  //   {
  //     allowedTags: ['mark'],
  //   }
  // )
  const updateDeleteComment = (cache, result) => {
  ///5. updateDeleteComment를 만든다.
  
    const {
      data: {
        deleteComment: { ok },
      },
    } = result
    ///6. deleteComment 실행 후, ok를 result로 받는다.
    
    if (ok) {
      cache.evict({ id: `Comment:${id}` })
      ///7.ok를 받으면, cache의 해당 Comment를 지운다.
      ///evict는 delete 뜻임..
      
      cache.modify({
        id: `Photo:${photoId}`,
        fields: {
          commentNumber(prev) {
            return prev - 1
          },
        },
      })
      ///8. comment를 지웠으면, Photo cache의 commentNumber의 숫자를 -1 해준다.
      
    }
  }
  const [deleteCommentMutation] = useMutation(DELETE_COMMENT_MUTATION, {
    variables: {
      id,                ====>variables를 빠뜨리지 말고 꼭 넣어준다
    },
    update: updateDeleteComment,
  })
  ///2. const [] = useMutation()을 만들어준다.
  
  const onDeleteClick = () => {
    deleteCommentMutation()
  }
  ///3. onDeleteClick 함수를 만든다, next, return부분에 button을 만들어
  ///클릭하면 deleteCommentMutation이 실행되게 한다.
  
  return (
    <CommentContainer>
      <FatText>{author}</FatText>
      {/* <CommentCaption
        dangerouslySetInnerHTML={{
          __html: cleanedPayload,
        }}
      /> */}
      <CommentCaption>
        {payload.split(' ').map((word, index) =>
          /#[\w]+/.test(word) ? (
            <React.Fragment key={index}>
              <Link to={`/hashtags/${word}`}>{word}</Link>{' '}
            </React.Fragment>
          ) : (
            <React.Fragment key={index}>{word} </React.Fragment>
          )
        )}
      </CommentCaption>
      {isMine ? <button onClick={onDeleteClick}>X</button> : null}
    </CommentContainer>
    ///4. X를 클릭하면, onDeleteClick 함수가 실행되게 한다.
    ///next, cache update를 위해서 updateDeleteComment를 만든다.
    
  )
}

export default Comment