[TIL #68] 낙관적 업데이트

관심 전통시장을 연결하는 와중에 튜터님께서 관심 전통시장 페이지에서도 좋아요 삭제가 있었으면 좋겠다고 하셔서 이때다 싶어서 낙관적 업데이트로 구현해 보았다.

낙관적 업데이트란?

낙관적이라는 말이 긍정적으로 보는 마인드 라는 의미를 담고 있듯이,
낙관적 업데이트는 서버로 보낸 요청이 정상일 것이라고 예상하고, 클라이언트의 요청에 대한 응답이 오기 전에 클라이언트의 데이터를 미리 변경시키는 작업을 하는 것을 말한다. 빠른반응을 볼 수 있다.

좋아요 기능, 정렬기능 등 다양한 곳에서 사용 가능하다.

이 방법은 Tanstack query useMutation hook에서 onSuccess 대신에 onMutate onError를 조합하여 구현한다.

---

방법

좋아요 기능에 낙관적 업데이트는 다음과 같다

1. 사용자가 좋아요 버튼을 누른다
2. api 요청 결과가 오기 전에 먼저 ui 업데이트
3. api 응답이 온다면 덮어쓰우고 아니면 롤백

onMutate 콜백은 mutation이 시작될 때 호출되는 함수로, mutation이 실행되기 전에 동기적으로 실행된다.

variables는 mutation 함수에 전달되는 변수다.

async와 await를 사용해 cancelQueries를 호출해서 onMutate의 이후 Error가 발생시에 refetch가 일어나지 않도록 한다.

getQueryData 를 통해 현재 캐시된 데이터를 가져와서 저장하는데 이는 서버에서 에러를 반환했을 경우 다시 롤백을 위해서 사용한다.

onSetteld 는 쿼리를 무효화 하고 동기화 하는 동작이 존재한다.

팀원 분이 짜신 좋아요 기능을 가져와봤다. 잘짜셔서 공부하는데 도움이 많이 되었다.

const mutation = useMutation({
    mutationFn: async () => {
      if (!likeData?.length) { }]);
        return true;
      } else {
       await (데이터연결)
        return false;
      }
    },
    onMutate: async () => {
      await queryClient.cancelQueries({
        queryKey: ['likes', marketId, userId]
      });

      const previousLikes = queryClient.getQueryData([
        'likes',
        marketId,
        userId
      ]);

      queryClient.setQueryData(['likes', marketId, userId], (oldData: any) => {
        return oldData?.length
          ? []
          : [{ market_id: marketId, user_id: userId }];
      });

      return { previousLikes };
    },
    onError: (err, variables, context) => {
      queryClient.setQueryData(
        ['likes', marketId, userId],
        context?.previousLikes
      );
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ['likes', userId]
      });
    }
  });

이젠 프로필 변경에 적용해 볼 예정!

---

TanstackQuery_optimistic Update