react-query에서 랜더링 할 때마다 api를 계속 요청합니다.

Question

react-query를 처음 사용해 보는데요. query-key에 대해서 데이터를 캐싱해놓고 꺼내서 사용할 수 있다고 해서 사용해보았습니다.
데이터가 이미 캐싱되어 있고 데이터에 변화가 없는 상태인데도 계속해서 데이터를 새로 불러오도록 API를 요청합니다. cacheTime이라는 것이 있는데 이것도 기본 5분으로 설정되어 있다는데 왜 안되는 걸까요?

엄홍재 · Answer

cacheTime말고 staleTime이라는 것이 있습니다.
staleTime은 해당 데이터가 얼마나 신선(?) 한지를 나타내는 기간입니다. default값은 0으로 되어있어서 매번 data가 stale하다고 판단되어 API를 요청하는 것입니다.
staleTime을 주면 해당 기간동안 API를 요청하지 않을거에요!

cacheTime, staleTime 관련 글: https://2ham-s.tistory.com/407

공식문서 내용입니다.
staleTime: number | Infinity
- Optional
- Defaults to 0
- The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.
- If set to Infinity, the data will never be considered stale