리액트 쿼리에는 두 가지 status가 있다. query status와 fetch status.
query status는 실제로 받아 온 data 값이 있는지 없는지를 나타내는 상태 값.
fetch status는 queryFn() 함수가 현재 실행되는 중인지 아닌지를 나타낸다.
Query Status
query status는 세 가지 상태 값을 가진다. pending, success, error의 상태 값 중 하나를 가지게 된다. pending은 아직 데이터를 받아오지 못했을 때를 의미하고, error는 데이터를 받아오는 중에 에러가 발생했음을 뜻한다. 그리고 데이터를 성공적으로 받아오게 되면 success 값을 갖는다. 그리고 이 상태 값들은 각각 isPending, isError, isSuccess와 매칭이 된다.
useQuery()의 결괏값을 콘솔에 찍어보면 결괏갑이 두 번 출력된다.- 가장 처음 컴포넌트가 마운트되고(DOM 트리에 추가되고)
useQuery()가 실행되면서, 데이터를 아직 받아오기 전이므로pending상태가 됨 - 그 후에 찍힌 두 번째 결괏값을 살펴보면
status가success로 되어 있고, data 항목에서 실제 데이터들도 확인 가능
Fetch Status
fetch status도 세 가지 상태 값을 가진다. fetching, paused, idle.
useQuery()를 사용할 때 쿼리 함수라는 걸 queryFn으로 등록했다. 이 쿼리 함수의 실행 상태를 말해주는 값이 바로 fetch status이다.
- 현재 쿼리 함수가 실행되는 중일 때에는 fetching 상태
- 쿼리 함수가 시작은 했는데 실제로 실행되고 있지 않다면 paused 상태
- 대표적으로 네트워크가 오프라인이 된 경우 기본적으로 paused 상태 됨 - 쿼리 함수가 어떤 작업도 하지 않은 상황이라면(위 두가지 상태도 아닐 때) idle 상태가 됨
정리
query status와 fetch status는 독립적인 상태이기 때문에, 상황에 따라 다양한 조합의 형태로 나타날 수 있다.
이상적인 상황에서는 pending & fetching 상태에서 success & idle 상태가 되겠지만, 에러가 발생하는 경우 error & idle 상태가 될 수 있다.
success & idle 상태에서 데이터를 refetch하게 되면, success & fetching상태가 되기도 한다. 이 두 상태 값을 잘 활용하면 다양한 상황에 맞춰 디테일한 구현을 할 수 있다.
