Guides&Concepts_(Important Defaults)

Important Defaults

React-Query를 사용하면서 중요하게 여겨야 할 부분에 대한 설명이다.

useQuery 혹은 useInfiniteQuery에 의해 cached된 data는 기본적으로 stale상태로 여겨진다.

전역적으로 설정해 모든 쿼리에 대해, 혹은 개별 쿼리에 대해 'staleTime'옵션을 이용해 더 '긴' staleTime을 만들어줄 수 있다.
staleTime이 짧으면 짧을수록 stale상태로 빨리 변하고, stale상태로 변하면 자동적으로 refetch된다.
staleTime을 더 길게 만들어준다면 refetch주기를 더 길게 가져갈 수 있다는 점을 바로 캐치할 수 있다.

 

Stale queries

stale queries는 다음과 같은 상황들에 대해 background에서 자동적으로 refetch된다.

• 새로운 query가 mount될때
• 창이동과 같은 행동으로 뷰포트가 다시 나타났을때
• 네트워크가 다시 연결되었을때
• 쿼리가 refetch interval로 구성되었을때
  -> 굳이 stale상태가 아니더라도, refetch간격을 이미 설정했다면 그 간격대로 refetch된다는 의미이다.

만약 내가 예상했던 refetch가 아닌데도 refetch가 일어난다면, refetchOnMount, refetchOnWindowFocus, refetchOnReconnect and refetchInterval 옵션을 설정해주면 된다.

 

Inactive queries

useQuery 혹은 useInfiniteQuery에 의해 받아진 데이터는 추가적으로 새로운 데이터상호작용이 없는 상태에서(query observers에 의해 발견되지 않는상태) "inactive"꼬리표를 달게된다. 그리고 나중에 재사용을 위해 일단 cache된다.

(inactive꼬리표달린애들 = cache된 애들)은  5분이 넘어가면 garbage collecter에 의해 정리된다.

5분이 넘어가도 계속 남아있길 원한다면, cacheTime을 '1000 * 60 * 5'밀리초 이상 설정해주면 된다.

 

backoff delay

데이터-쿼리를 받아오는데 실패했을때에는 에러를 나타내기전에 기본적으로 *backoff delay방식을 사용하여 3번을 재시도한다.

backoff delay방식: 이전에 실패한 요청과 같은 요청을 보내기 전에 기다리는 시간을 점차 늘려가 시도 간격을 넓히는 방식

만약 retry횟수나, backoff delay간격을 설정하고 싶다면, 'retry', 'retryDelay'옵션을 설정해주면 된다.

 

detected data if data changed or not

기본적으로 쿼리 결과는 구조적으로 공유되어 데이터가 변경되는지 아닌지 관찰되고 변경되지 않는 경우 데이터 참조가 변경되지 않도록 유지된다. 이렇게 함으로써 useMemo 및 useCallbakc과 관련한 값 안정화에 도움이 될 수 있다.

근데 뭐 99.9% 이 기능을 비활성화할필요가 없다고 한다.