TanStack-Query를 사용하여 api 데이터 캐싱 처리하기

Tanstack-Query Caching 라이프 사이클

기본설정으로는 캐싱이 되지 않는다

• staleTime: 0 / gcTime: 5
• 데이터를 fetcing 해 오자마자 신선하지 않다고 생각함
  • stale하기 때문에 요청 시 마다 데이터를 계속 호출한다

staleTime

• stale: 오래된, 신선하지 않은
• 데이터가 fresh에서 stale로 변경될 때 까지 남은 시간
• fresh한 상태라면 저장된(캐싱된) 데이터가 다시 사용됨
• staleTime 이후 stale 상태로 변경됨

gcTime(cacheTime)

• 데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간
• 쿼리 인스턴스가 unmount 되면 데이터는 inactive 상태로 변경되며, 캐시는 cacheTime만큼 유지된다.
  • cacheTime이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다.
• cacheTime은 staleTime과 관계없이, 무조건 inactive 된 시점을 기준으로 캐시 데이터 삭제를 결정한다.
  = 쿼리가 비활성화되는 즉시 캐시데이터는 삭제된다

staleTime과 gcTime 값의 관계

• staleTime보다 gcTime 값이 더 커야 서버에서 fresh한 데이터를 가져오는 동안 캐싱 데이터를 보여줄 수 있다.

실제 사용 예제

  const {
      isLoading,
      error,
      data,
      isFetching,
    } = useQuery({
      queryKey: ['mainData', id],
      queryFn: () => getMainData({ id: id }),
      staleTime: 1000 * 20,
      gcTime: 1000 * 60 * 2,
    })

참고자료
https://velog.io/@yrnana/React-Query%EC%97%90%EC%84%9C-staleTime%EA%B3%BC-cacheTime%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://velog.io/@juhyeon1114/React-Query-%EC%BA%90%EC%8B%B1-%EC%9B%90%EB%A6%AC-w.-staleTime-cacheTime-Lifecycle