🛠️ Mutation 완료 후 서버 상태 동기화

[BangDori]

작업 이유

• 🔧 Mutation 이후 서버 상태 동기화 유지 #56 이슈 처리

작업 사항

1️⃣ Mutation 서버 동기화

• 기존에 Mutation을 완료한 이후 서버 상태에 대한 동기화를 진행하고 있지 않았습니다.

좋아요 API 호출 후에 서버와의 동기화가 진행되지 않는 모습

API 호출이 완료된 이후 서버 상태와 동기화를 진행하지 않고 있기 때문에, 사이드 이펙트로 서버와의 상태가 불일치하는 현상이 발생할 수 있습니다.

이를 해결하기 위해 기존 mutation hooks 에 onSettled 옵션을 활용하여, mutation이 완료될 경우 해당 쿼리들을 무효화시켜 다시 서버로부터 받아오도록 수정하였습니다.

export const useLikes = (feedId: number, isLiked: boolean) => {
  const queryClient = useQueryClient();

  const { mutate: handleLikeFeed, isPending } = useMutation({
    mutationFn: () => ...
    onMutate: async () => ...
    onError: (_, __, context) => ...
    onSuccess: (response, _, context) => ...
    onSettled: () => {
      // ✨ 좋아요 API가 호출 된 이후에 서버 상태와의 동기화를 위해 쿼리를 무효화한다.
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.feeds] });
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.feed, feedId] });
    },
  });

  return { handleLikeFeed, isPending };
};

좋아요 API 호출 후에 서버와의 동기화가 진행되는 모습

2️⃣ Mutation 쿼리 무효화

기존에 쿼리 무효화를 피드 상세 페이지를 생각하여 아래의 두 쿼리를 초기화하고 있었습니다.

1. QUERY_KEYS.feeds
2. [QUERY_KEYS.feed, feedID]

공식 문서를 확인했을 때, 쿼리 무효화의 startWith를 가지고 모든 쿼리를 무효한다고 나와있습니다. 그래서 피드 디테일에 대한 쿼리를 QUERY_KEY.feed, feedId -> QUERY_KEY.feeds, feedId 로 수정하였습니다.

export const useLikes = (feedId: number, isLiked: boolean) => {
  const queryClient = useQueryClient();

  const { mutate: handleLikeFeed, isPending } = useMutation({
    mutationFn: () => ...
    onMutate: async () => ...
    onError: (_, __, context) => ...
    onSuccess: (response, _, context) => ...
    onSettled: () => {
      // ✨ QUERY_KEYS.feeds로 시작하는 모든 쿼리를 무효화한다.
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.feeds] });
    },
  });

  return { handleLikeFeed, isPending };
};

• reference: https://tanstack.com/query/v4/docs/framework/react/guides/query-invalidation

리뷰어가 중점적으로 확인해야 하는 부분

• 기존 코드의 문제 해결 방식에 대해 개선 사항이 있다면 편하게 말해주세요!
• 기존 코드의 문제점을 이해하였나요?

발견한 이슈

• 없음

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-58.d37mn03xh3qyyz.amplifyapp.com

[Legitgoons]

기존 코드의 문제점과 해결 방식에 대해 이해했습니다. 병합하셔도 좋습니다.