tanstack-query(react-query) staleTime과 refetchInterval을 활용한 네트워크 요청 최소화 방법

tanstack-query의 기초를 다시 보면서 전에 팀 프로젝트를 진행할 때 네트워크 요청이 많아 사용량이 다 차버린 생각이 나서 네트워크 요청을 최소화하는 방법을 찾게 되었다.
 

상황 및 문제점

먼저 네트워크 요청을 줄이려면 tanstack-query의 데이터 캐싱을 사용해야 하는데 기존에는 stale time을 설정하지 않아서 0 이였다. 이 값이 0이면 데이터가 fresh 상태가 되지 않고 계속 stale 상태가 되어 계속 요청을 보내게 된다.
tanstack-query의 캐싱 기능을 사용하지 않게 되는 것이다.
 
그런데 staleTime을 조정해서 캐싱되는 시간을 확보하려고 하는데 문제가 되는 점이 있었다.
예를 들어 내가 좋아요 한 글이 있는데 이 글의 제목이나 유저가 좋아요를 취소하는 등의 변경이 발생하면 최신 데이터를 볼 수 없는 것 아닌가 하는 점이었다.
 

해결 방법

이 의문점을 해결하고자 찾아본 방법은 refetchInterval을 사용하는 것이다.
1. refetchInterval을 사용하여 사용자가 머무는 동안 설정한 시간 간격으로 데이터를 새로 가져오는 방법이다.
 
예시코드

const { data, isLoading, isError } = useQuery({
    queryFn: () => getLikeBoardData(uid),
    queryKey: [GET_USER_INFO.MY_LIKE_BOARD_LIST],
    enabled: !!uid,
    staleTime: 300000, //5분
    refetchInterval: 60000, // 1분마다 데이터 재요청
  })

staleTime을 5분으로 설정하고 refetchInterval을 1분으로 설정하여 데이터를 다시 가져오도록 하였다.
 

결론

refetchInterval과 staleTime을 사용하려면 두 가지를 고려해야 할 것 같다.
 
1. 데이터 사용 빈도
첫 번째로는 예를 들어 사용자가 좋아요 한 게시글만 모아서 보는 리스트라면 이 게시물 리스트를 자주 확인하는지와 같은 사용 빈도이다. 
 
2. 실시간으로 변경되어야 하는 데이터 인지
위와 같은 좋아요 게시판이라면 사용자가 좋아요 취소를 했을 때 바로바로 반영되어 데이터가 변경되어야 하기 때문에 이 옵션을 사용하는 것은 바람직하지 않을 수 있다.