stale - 신선하지 않다, 데이터가 더 이상 유효하지 않다
기본 값은 0
데이터를 조회하는 순간 데이터는 바로 유효하지 않게 됨
데이터가 유효하지 않다면 기회가 주어졌을 때
다시 요청하여 데이터를 최신화
재요청 기회가 주어지는 시점은
똑같은 캐시 키를 사용하는 useQuery를 사용하는 컴포넌트가 마운트 될 때
cacheTime은 useQuery Hook을 사용한 컴포넌트가 언마운트 되고 나서
해당 데이터를 얼마동안 유지할지에 대한 설정
기본 값은 5분
useQuery를 사용한 컴포넌트가 언마운트 되고 나서
5분 안에 다시 마운트된다면 isLoading 값이 true로 되지 않음
처음 렌더링하는 시점부터 data 값이 이전에 불러온 데이터로 채워져 있게 됨
staleTime에 따라 해당 데이터가 유효하다면 재요청하지 않고
유효하지 않다면 재요청
예제를 통해 이해
Case 1. (기본 옵션) 기본 옵션에서 staleTime은 0, cacheTime은 5분
1. SampleA 컴포넌트에서 useQuery(['articles'], getArticles) 사용
- 데이터가 조회되는 순간 데이터가 더 이상 유효하지 않다고 간주
2. 나중에 SampleB라는 컴포넌트가 화면에 마운트되고, 이 컴포넌트도
useQuery['articles'], getArticles) 를 사용
- SampleB가 화면에 나타나는 순간, SampleA에서 불러온 데이터를 그대로 보여줌
- 캐시 키를 통하여 해당 데이터가 유효한지 확인
- 지금 상황은 데이터가 유효하지 않기 때문에 재요청
- 재요청이 끝나면 새로운 데이터가 SampleB와 SampleA에 모두 반영
- 요청은 한 번만 하지만, 해당 캐시 키를 사용하는 useQuery Hook에 모두 반영
3. SampleA와 SampleB가 모두 언마운트
- 같은 캐시 키를 가진 useQuery를 사용하는 컴포넌트가 화면에서
모두 언마운트되면 5분동안 데이터 유지
4. 5분 안에 SampleA 컴포넌트가 다시 마운트 됨
- 컴포넌트가 처음 보일 때 이전에 불러온 데이터를 그대로 사용
- 데이터가 유효하지 않기 때문에 재요청, 새로운 데이터로 대체
5. SampleA 컴포넌트가 언마운트 되고 5분 뒤에 다시 마운트 됩니다.
- 5분이 지났기 때문에 캐시에서 기존 데이터 제거
- data가 undefined이며 새로 요청
Case 2. (staleTime 3분) 만약 staleTime을 3분(1000 x 60 x 3)으로
설정했을 때 어떻게 작동하는지 확인
1. SampleA 컴포넌트에서 useQuery(['articles'], getArticles,
{ staleTime: 1000 x 60 x 3 } )을 사용
- 응답받은 데이터는 3분 동안 유효함
2. 3분 안에 같은 키를 가진 useQuery를 사용하는 컴포넌트
SampleB 컴포넌트가 마운트
- 기존에 받아온 데이터를 그대로 사용
- 3분 안에 컴포넌트가 마운트 되어서 데이터가 유효하다고 간주
새로 요청하지 않음
3. SampleA 컴포넌트와 SampleB 컴포넌트가 모두 언마운트
- 데이터가 5분동안 캐시에 유지
4. 5분 안에 SampleA 컴포넌트가 마운트
- 5분 안에 컴포넌트가 마운트됐기 때문에, 캐시에 있던 데이터를 그대로 사용
- 만약 마지막으로 데이터를 요청한지 3분 안에 마운트 됐다면
데이터를 새로 요청하지 않음.
3분 이상 경과됐다면 데이터를 새로 요청, 새로운 데이터로 대체