react-query는 다음과 같은 라이프 사이클을 가지고 있습니다.
Idle
idle 상태는 enabled flag가 false이고 initalData 또한 존재하지 않는 상태입니다.
initalData가 존재한다면 fresh 데이터로 취급하기 때문에 이를 원하지 않는다면 initalStale을 통해 stale한 데이터로 만드는 것을 고려해봐야 합니다.
Fetching
API를 호출중인 상태 입니다.
Fresh
query instance의 데이터가 최신 데이터라고 간주하는 상태입니다.
staleTime이 지나면 stale 상태가 됩니다.
이때 fetch 해온 데이터는 queryClient에 caching 됩니다.
Stale
query instance의 데이터가 최신 데이터가 아니라고 간주하는 상태입니다.
staleTime이 지나면 변경되는 상태이며 stale 상태일 경우 refetching 조건에 따라 데이터를 다시 fetch 합니다.
refetching 조건들은 다음과 같습니다.
- query가 새로운 instance로 mount 될 경우
- window가 refocusing될 경우
- 네트워크가 끊겼다가 다시 연결된 경우
- refetch 함수를 호출한 경우
- invalidateQueries와 같은 함수를 통해 invalidate하게 만든 경우
Inactive
query를 observe하는 component가 없는 상태입니다.
query는 component가 mount 될 때 observer 객체를 추가하고 unmount 될 때 observer 객체가 삭제됩니다.
observer 객체가 하나도 없고 cacheTime이 지나면 destory 됩니다.
Destory
query가 오래되여 GC에 의해 처리된 상태입니다.
observer 객체가 없고 cacheTime이 지나면 변경되는 상태이며 queryClient의 cache에서 제거됩니다.
주의해야 할 점
- refetch 함수는 caching된 데이터를 가져오지 않고 무조건 요청을 다시 날립니다.
만약 stale 상태에서 caching된 데이터를 가져오려면 useQueryClient hook을 통해 가져와야 합니다. - cacheTime은 query의 데이터가 fetch된 시점에서 시작되지 않고 inactive 상태에서 시작됩니다.
inactive 상태에서 cacheTime이 지나면 queryClient에서 모든 정보가 삭제됩니다.