버그 해결 - SWR의 캐시 이슈(2)

지난 이야기

useEffect(() => {
    setIsLikedFeed(isLiked);
    setFeedLikeCount(likeCount);
  }, [isLiked, likeCount]);

SWR의 mutate란?

mutate(key, data, options)

뮤테이션 - SWR

optimisticData: 클라이언트 캐시를 즉시 업데이트하기 위한 데이터. 일반적으로 낙관적인 UI에서 사용됩니다. revalidate: 비동기 업데이트가 해소되면 캐시를 갱신합니다. populateCache: should the result of the remote mutation be written to the cache, or a function that receives new result and current result as arguments and returns the mutation result.

https://swr.vercel.app/ko/docs/mutation

프로젝트 적용

CommunityPage

ReviewFeed

const { mutate } = useSWRConfig();

const handleLikeClick = async (reviewId: number) => {
    // 낙관적 업데이트
    setIsLikedFeed(!isLikeFeed);
    setFeedLikeCount(isLikeFeed ? feedLikeCount - 1 : feedLikeCount + 1);

    const { data } = await reviewAPI.likeToggle(reviewId);
    const { likeCount, isLiked } = data.data;
    setIsLikedFeed(isLiked);
    setFeedLikeCount(likeCount);
		
    // mutate 추가
    mutate(`api/v1/reviews/${reviewId}`, undefined, { revalidate: true });
  };

ReviewDetail

const { mutate } = useSWRConfig();

const handleLikeClick = async (reviewId: number) => {
    setIsLikedFeed(!isLikeDetail);
    setDetailLikeCount(isLikeDetail ? detailLikeCount - 1 : detailLikeCount + 1);

    const { data } = await reviewAPI.likeToggle(reviewId);
    const { likeCount, isLiked } = data.data;
    setIsLikedFeed(isLiked);
    setDetailLikeCount(likeCount);

    // 추가한 부분
    mutate(
      `api/v1/reviews/${reviewId}`,
      {
        ...reviewDetail,
        isLiked,
        likeCount,
      },
      { revalidate: false },
    );
  };