Case 2. (staleTime 3분) 만약 staleTime을 3분(1000 × 60 × 3)으로 설정했을 때 어떻게 작동하는지 확인해봅시다.
1. SampleA 컴포넌트에서 useQuery('articles', getArticles, { staleTime: 1000 * 60 * 3} )을 사용합니다.
- 응답받은 데이터는 3분 동안 유효합니다.
2. 3분 안에 같은 키를 가진 useQuery를 사용하는 컴포넌트 SampleB 컴포넌트가 마운트됩니다.
- 기존에 받아온 데이터를 그대로 사용합니다.
- 3분 안에 컴포넌트가 마운트되어서 데이터가 유효하다고 간주하기 때문에, 새로 요청하지 않습니다.
3. SampleA 컴포넌트와 SampleB 컴포넌트가 모두 언마운트됩니다.
- 데이터가 5분 동안 캐시에 유지됩니다.
4. 5분 안에 SampleA 컴포넌트가 마운트됩니다.
- 5분 안에 컴포넌트가 마운트됐기 때문에, 캐시에 있던 데이터를 그대로 사용합니다.
- 만약 마지막으로 데이터를 요청한 지 3분 안에 마운트됐다면 데이터를 새로 요청하지 않습니다. 3분 이상 경과됐다면 데이터를 새로 요청하고, 새로운 데이터로 대체합니다.