React-Query [staleTime, casheTime]

내 질문

React 쿼리에서 staleTime이 3분이고 casheTime이 2분일 때, 한 번 API 요청을 하고 2분 30초에 동일한 API 요청을 하면, 2분의 casheTime이 지났기 때문에 다시 API 요청을 하나요?

 

GPT답변

React Query에서 staleTime 및 cacheTime 옵션은 API 엔드포인트에서 데이터를 캐싱하고 다시 가져오는 동작을 제어합니다.

예에서 staleTime이 3분으로 설정되고 cacheTime이 2분으로 설정된 경우 캐싱 및 다시 가져오기가 작동하는 방식은 다음과 같습니다.

1. 초기 API 요청: 첫 번째 API 요청을 하면 React Query가 API에서 데이터를 가져와서 캐시에 저장합니다.
2. 2분 ~ 30초 ~ 3분 사이: 이 시간 프레임 내에 동일한 API 요청을 하면 React Query는 데이터가 오래되었지만 여전히 사용 가능한 것으로 간주합니다. 캐시된 데이터를 반환하고 동시에 백그라운드에서 API에 새로운 데이터 요청을 보냅니다.
3. 3분 후: 3분의 staleTime이 지난 후에 API 요청을 하면 React Query는 여전히 초기에 캐시된 데이터를 반환합니다. 그러나 새로운 데이터를 얻기 위해 API에 요청도 보냅니다. 새로운 데이터가 수신되면 React Query는 캐시를 업데이트하고 새 데이터로 다시 렌더링을 트리거합니다.

따라서 시나리오에서 2분 30초에 동일한 API 요청을 하면 React Query는 캐시된 데이터를 반환하지만 새로운 데이터에 대한 백그라운드 요청도 시작합니다. staleTime이 아직 지나지 않았기 때문에 즉시 API 요청을 만들지 않습니다.

리액트 쿼리의 StaleTime과 CacheTime

참고했을 때 이해하기에 좋았던 블로그