[React Query] 쿼리 디폴트 설정

Query 디폴트

useQuery와 useInfiniteQuery를 사용한 쿼리 인스턴스는 기본적으로 캐시 데이터를 stale로 취급한다. (staleTime이 기본적으로 0)

stale query는 아래와 같은 조건에서 자동적으로 refetch 된다.

• 새로운 쿼리 인스턴스가 마운트했을 때 (refetchOnMount)
  • 예를 들어 데이터를 fetch하는 컴포넌트가 있고, 이 컴포넌트가 다른 데에서도 마운트되면 캐시된 데이터를 쓰는게 아니라 그 때 또 다시 refetch한다는 뜻.
• 윈도우가 refocus됐을 때 (refetchOnWindowFocus)
• 네트워크가 다시 연결됐을 때 (refetchOnReconnect)
• refetch interval 설정을 해줬을 때 (refetchInterval)

useQuery, useInfiniteQuery, 쿼리 옵저버의 active 인스턴스를 갖고 있지 않은 쿼리 결과들은 inactive라는 딱지를 갖게 되며, 나중에 사용될 것에 대비해 캐시된다. 디폴트로 inactive 딱지가 붙은 쿼리들은 5분 뒤에 garbage collect된다. (이 설정을 바꾸려면 cacheTime 설정을 바꾸면 된다. )

Stale vs Inactive

• 리액트 쿼리는 useQuery와 useInfiniteQuery로 불러온 쿼리에 바로 stale 딱지를 붙인다.
• Stale 딱지가 붙은 쿼리는 최신의 데이터(fresh data)를 가져오기 위해 새로운 네트워크 콜을 한다. 기본적으로 useQuery는 fetch하자마자 stale 취급하므로, useQuery가 사용된 컴포넌트가 리렌더링될때마다 새로운 네트워크콜을 하게 된다.
• 반면 Inactive는 해당 쿼리가 마운트되어 있는 어떤 컴포넌트에서도 사용되지 않을 때 딱지가 붙는다. 즉 Inactive 쿼리는 사용되지 않으면서 캐시는 돼있는 데이터가 있다는 뜻이다. 떠있지 않은 컴포넌트의 비동기 state(또는 server state) 보관이 가능한 것은 이 캐시때문이다.
• 리액트 쿼리는 디폴트로 5분 동안 메모리에 캐시하고 삭제한다.

Ref

https://backbencher.dev/articles/react-query-what-is-inactive-query-state

https://react-query.tanstack.com/guides/important-defaults

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