React-Query - #cache

React-Query의 경우 서버 상태를 관리하기 위해 전역으로 데이터를 저장하지 않는다.
React-Query는 전역상태를 저장하고 있는건 아니지만 서버 상태를 cache를 해두었다가 나중에 데이터를 다시 사용할 수 있게 해준다.

React-Query의 캐싱 개념은 Stale과 cacheTime을 통해 이루어진다.
우선, Stale이 무엇인지 먼저 알아보자.

Stale 이란?

React-Query는 기본적으로 캐싱된 data를 stale한 상태로 여긴다.
(stale의 사전적 의미는 "신선하지 않는"이라는 뜻을 가진다.)
신선하다 함은, 서버에서 조회한 데이터는 그때 당시의 데이터 snapshot이고, 외부 요청으로 서버 데이터가 변경이 되었다면 내 브라우저가 가진 데이터는 이미 오래된 낡은 데이터가 되었으므로 stale하다고 말하는 것이다.
stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 아래의 경우에 refetch 된다.

refetch 되는 조건들

1. 새로운 query instance가 마운트 될 때 (page를 이동 했다가 왔을 때 의미)
2. 브라우저 화면을 이탈 했다가 다시 focus 할 때
3. 네트워크가 다시 연결될 때
4. 특별히 설정한 refetch interval에 의한 경우 (refetchInterval)
   
   

staleTime & cacheTime

React-Query는 아무 옵션을 설정하지 않으면 캐싱되지 않는다.
refetchOnWindowFocus 옵션 등으로 기본 refetch 설정을 막을 수 있고
staleTime 옵션으로 설정한 시간 동안 데이터가 stale 되지 않도록 해 refetch를 막을 수도 있다.
또한, query에 별다른 action이 없으면 inactive 상태로 캐시에 남아 있다가 5분 뒤에 메모리에서 사라진다.
cacheTime 옵션을 설정해서 이 시간을 조정할 수 있다.

사용법

앞서 배운 queries에서 사용하는 useQuery() Hook을 사용한다.

const { data, isLoading } = useQuery('@getUser', getUser, {
  staleTime: Infinity,	// default : 0
  cacheTime: 5000,  // default : 5min
});

쿼리 별 세팅 없이 기본 옵션으로 쓰고 싶을 때

import { QueryClient } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
    },
  },
})

await queryClient.prefetchQuery({ queryKey: ['posts'], queryFn: fetchPosts })

---

References

• https://2ham-s.tistory.com/407
• https://jforj.tistory.com/243