공식 문서 : https://tanstack.com/query/v4/docs/guides/important-defaults
Important Defaults
React Query는 공격적이지만 온당한인 기본값으로 구성된다. 때때로 이러한 기본값들은 새로운 유저의 허를 찌르거나, 유저가 잘 알지 못하는 경우 학습/디버깅을 어렵게 만들 수 있다.(한마디로 기본개념들이 어려우니 잘 이해한 뒤 react query를 더 공부해라) React Query를 계속해서 배우고 사용할때 다음을 반드시 기억해라 :
useQuery또는useInfiniteQuery를 통한 query 인스턴스들은 기본적으로 캐시된 데이터를 stale(오래된)하다고 간주한다.
이를 변경하고 싶다면 staleTime 옵션을 사용하여 쿼리를 전역적으로 또는 쿼리별로 설정할 수 있다. staleTime을 더 길게 지정하면 쿼리가 데이터를 자주 refetch하지 않는다.
- stale한 쿼리들은 다음과 같은 경우 백그라운드에서 자동으로 refetch한다.
- 쿼리의 새 인스턴스가 mount
- window refocus
- network reconnect
- 쿼리가 optional하게 refetch interval로 설정됨
예상하지 않은 refetch를 보게 된다면 window에 focus를 두고 react query가 refetchOnWindowFocus를 수행하고 있기 때문일 수 있다. 특히 브라우저 DevTool과 당신의 app 사이에 포커스를 맞추면 fetch가 발생하기 때문에 개발중에 이 문제가 더 자주 발생할 수 있다.
이 기능을 변경하고 싶다면 refetchOnMount, refetchOnWindowFocus, refetchOnReconnect,refetchInterval등의 옵션을 사용할 수 있다.
useQuery,useInfiniteQuery또는 query observer들의 active 인스턴스가 더 이상 없는 쿼리 result는 "inactive"로 지정되고 나중에 다시 사용할 경우를 대비하여 캐시에 남아있다.
기본적으로, "inactive" 쿼리들은 5분 뒤에 garbage collection된다.
이를 변경하기 위해 query의 cacheTime 기본값을 변경할 수 있다.
- 실패한 쿼리는 캡처하여 UI에 에러를 표시하기 전에 exponential backoff delay와 함께 자동으로 3번 재시도 된다.
참고 : https://jungseob86.tistory.com/12
이를 변경하려면 query의 기본 retry, retryDelay 옵션을 3이 아닌 다른 값으로 변경하고, 기본 exponential backoff delay 기능을 변경할 수 있다.
- 기본적으로 쿼리 result들은 data가 실제로 변경되었는지 아닌지를 감지하기 위해 구조적으로 공유되며, 그렇지 않은 경우 useMemo 및 useCallback과 관련하여 값 안정화를 더 잘 지원하기 위해 데이터 참조가 변경되지 않은 상태로 유지된다. 이 개념이 생소하더라도 걱정하지 말자! 99.9%의 경우 이 기능을 disable할 필요가 없으며 cost없이 app 성능을 향상시킬 수 있다.
구조적 공유는 JSON-compatible(호환) 값에서만 작동하며, 다른 값 유형은 항상 변경된것으로 간주한다. 예를들어 큰 응답으로 인해 성능문제가 발생하는 경우, config.structuralSharing 플래그를 사용하여 이 기능을 비활성화 할 수 있다. 쿼리 response에서 JSON과 호환되지 않는 값을 처리하는 동안에도 데이터가 변경되었는지 여부를 탐지하고 싶다면, config.isDataEqual을 사용하여 데이터 비교함수를 정의할 수 있다.
