Modify cache

들어가기
앞에서 새로고침 없이 바로 screen을 업데이트 하는 방법으로
refetch Queries, writeFragment, readFragment등이 있었다.
modify cache는 apollo 3에서 등장한 cache update방법으로
가장 간단하고 깔끔한 방법

Photo.js

const Photo = ({
  id,
  user,
  file,
  isLiked,
  likes,
  caption,
  commentNumber,
  comments,
}) => {
  const updateToggleLike = (cache, result) => {
    const {
      data: {
        toggleLike: { ok },
      },
    } = result
    if (ok) {
      const photoId = `Photo:${id}`
      cache.modify({
        id: photoId,
        fields: {
          isLiked(prev) {
            return !prev
          },
          likes(prev) {
            if (isLiked) {
              return prev - 1
            }
            return prev + 1
          },
        },
      })
      ///toggleLike mutation 실행 후, ok를 return받으면,
      ///readFragment, writeFragment 없이,
      ///바로 PhotoId를 찾은 다음,
      ///cache.modify로 cache를 수정해줄 수 있음.
      ///가장 간단명료한 방법임.
      
      -------------->이하 부분은 참고만 할 것!!<---------
      // const fragmentId = `Photo:${id}`
      // const fragment = gql`
      //   fragment BSName on Photo {
      //     isLiked
      //     likes
      //   }
      // `
      // const result = cache.readFragment({
      //   id: fragmentId,
      //   fragment,
      // })
      // if ('isLiked' in result && 'likes' in result) {
      //   const { isLiked: cacheIsLiked, likes: cacheLikes } = result
      //   cache.writeFragment({
      //     id: fragmentId,
      //     fragment,
      //     data: {
      //       isLiked: !cacheIsLiked,
      //       likes: cacheIsLiked ? cacheLikes - 1 : cacheLikes + 1,
      //     },
      //   })
      // }
    }
  }

  const [toggleLike, { loading }] = useMutation(TOGGLE_LIKE_MUTATION, {
    variables: {
      id,
    },
    update: updateToggleLike,
    // refetchQueries: [{ query: FEED_QUERY }],
  })
  return () }~~~~