invalidateQueries를 사용해서 좋아요 구현

react-query에 대해 공부하면서 invalidateQueries에 대해 알게 되었고 마침 프로젝트 좋아요 구현에서 적용할 수 있는 상황이 생각나서 적용해 보았습니다.

invalidateQueries

invaidateQuries는 queryClient의 메서드중 하나로 해당하는 쿼리키에 대한 쿼리를 무효화 시켜서 데이터를 다시 가져옵니다.

invalidateQueries 적용 전

이전에는 위에 사진처럼 댓글에 좋아요를 눌렀을때 좋아요API 요청만 보내고 다시 데이터를 받아서 화면에 띄우는것이아닌 UI상으로만 사용자에게 바뀐것 처럼 구현했습니다.

invalidateQueries 적용

좋아요를 눌렀을때 데이터가 fresh한 상태가 아니기때문에 invalidateQueries를 사용하여 데이터를 stale한 상태로 처리하여 데이터를 다시 가져오는 작업을 구현해보았다.

import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';
import { PostReviewLike } from '../api/likeFetcher';

export const usePostReviewLike = () => {
  const queryClient = useQueryClient();

  return useMutation(PostReviewLike, {
    onSuccess: (data) => {
      queryClient.invalidateQueries('review');
    },
    onError: (error) => {
      if (axios.isAxiosError(error)) {
        alert(error.response?.data);
      } else {
        alert(error);
      }
    },
  });
};

invalidateQueries 적용 후

위에 사진을 보듯이 좋아요API만 보내는 것이 아닌 해당 query를 무효화 시켜 data를 새롭게 가져오는것을 볼 수 있습니다.

하지만 고민.....

이렇게 적용하면서 느꼈던것은 이전에는 해당 query를 무효화 시키지 않고 단지 사용자에게 UI상으로 변경을 예상해서 보여주었기 때문에 별도의 새롭게 데이터를 받아내는 API요청을 보내지 않았습니다.

그렇기 때문에 invalidateQueries를 적용하지않은 이전 방법이 요청을 적게 보내서 더 맞는 방법이 아닐까?
라는 생각이 들게 되었습니다.

또 다른 한편으로는 사용자에게 fresh한 데이터를 보여주는것이 아니기때문에
invalidateQueries를 적용한 방법이 더 맞는 방법인가?
라는 생각도 하게 되어 두개의 방법 사이에서 고민하게되었습니다.

그래서 각각의 방법에서 단점에 대해 생각해 보았을때
invalidateQueries를 적용하여 사용자에게 fresh한 데이터를 보여줄때 속도측면에서 느려서 사용자에게 UX적으로 이상하게 느껴지지 않을까?
라고 생각하여 비교해보았지만 큰 차이는 없었습니다.

결론

그래서 결국 두가지 방법에 대해 고민하던중 두개다 사용하면 어떨까? 라는 생각을 하게 되었습니다.

만약 사용자가 많아져서 서버에 과부하가 일어난다면 invalidateQueries를 적용했을때 UX적으로 이상하다고 느낄 수 있기때문에 좋아요를 누르거나 취소한경우 UI적으로만 사용자에게 변한것 처럼 보이게하였습니다.

또한 좋아요를 누르거나 취소한 경우 실제로 data가 stale한 상태이기 때문에 해당 query를 무효화 시켜 fresh한 데이터를 가져와서 두가지 경우를 합쳐서 사용했습니다.