[모모] React-Query의 캐싱기능으로 api요청을 줄여보자

메인프로젝트에서

react-query를 사용해 유저정보를 get요청으로 받아 RTK 전역 상태로 저장해서 사용을 했었습니다.

받은 유저정보 데이터는 staleTime 즉 데이터의 신선도가 0이었기 때문에

계속해서 유저의 정보를 요청하는 api가 계속해서 호출이 되었습니다.

 

유저정보의 변경이 잦지 않기 때문에 이는 불필요한 호출이라고 판단했고

react-query가 캐싱기능을 제공하는데 RTK로 데이터를 캐싱할 이유가 없었습니다.

 

비동기 데이터를 리덕스가 관리하는 것이 적합하지 않은 이유는

아래 참고한 블로그에서 dispatch 시점... 에 관하여 설명이 잘 되어있습니다.

 

그래서

유저정보가 쓰이는 컴포넌트들을 보아하니
1. 헤더 (프로필사진, 닉네임)
2. 메인 글목록페이지 (유저 지역)
3. 마이페이지
기타 memberId가 쓰이는 모든 컴포넌트들 129837개

정도가 있어 useQuery 커스텀훅을 만들어 각 컴포넌트에 넣어주었습니다.

 

//로그인유저 정보 들고오는 custom hook

export default function useMyInfo() {
  const navigate = useNavigate();
  const token = localStorage.getItem('Authorization');
  const {
    data: myData,
    isLoading,
    error,
  } = useQuery<void, AxiosError, Member>(
    ['myInfo'],
    () => getData(`${BASE_URL}/members/userInfo`),
    {
      enabled: !!token,
      onError: (error) => {
        if (error.response?.status === 401 && token) {
          navigate('/');
          localStorage.clear();
          alert('토큰이 만료되었습니다. 다시 로그인해주세요.');
        } else {
          console.error('오류가 발생했습니다.', error.message);
        }
      },
      staleTime: 10 * 60 * 60 * 1000,
      cacheTime: 10 * 60 * 60 * 1000,
    },
  );
  return { myData, isLoading, error };
}

처음에 이 코드를 작성할 때 staleTime과 cacheTime을 Infinity로 주었는데

생각해 보니 새로고침, 쿼리 무효화를 하지 않는 이상 api요청이 가지 않고

그렇게 되면 토큰이 만료되어도 캐시 된 데이터를 받게 되므로 401 에러코드를 받을 수 없게 됩니다.

 

그래서 리프레시토큰 만료 시간인 10시간으로 설정을 해주었는데

또 의문인 건 유저정보 수정이나 위와 같은 이유로 중간에 api 요청이 가게 되면 그때 받은 데이터는 다시 10시간의 캐시타임을 가지게 되는 것일까요?

그렇게 된다면 토큰이 만료되어도 정보를 계속 사용할 수 있는 문제가 또 생기게 됩니다.

리프레시 토큰이 있더라도 데이터의 일관성이나 보안적 측면에서 액세스 토큰 유효시간이하로 설정하는 게 좋다고 하네요!

아무튼

커스텀훅에서 리턴된 값을 가지고 RTK의 useSelector처럼 컴포넌트 여기저기에 사용을 해 보았습니다.

  const { myData, isLoading, error } = useMyInfo();

이 화면에서 두 개의 컴포넌트에서 myInfo를 구독하고 있지만 network탭에는 api 요청이 한 번만 된 것을 볼 수 있습니다.

 

queryClient를 console.log 찍어보면 캐시된 내역을 확인 할 수 있습니다.

import { useQueryClient } from 'react-query';
//..생략
  const queryClient = useQueryClient();
  console.log(queryClient);

 

Reference

https://jbee.io/react/thinking-about-global-state/

전역 상태 관리에 대한 단상 (stale-while-revalidate)

https://ttaerrim.tistory.com/53

리액트 쿼리의 StaleTime과 CacheTime