✅ 리액트 쿼리에는 두 가지 status가 있다.
1. Query Status : 실제로 받아 온 data 값이 있는지 없는지를 나타내는 상태 값
=> useQuery() 결괏값에서 status 값을 통해 확인할 수 있다.
2. fetch status: queryFn() 함수가 현재 실행되는 중인지 아닌지를 나타냄.
=> fetchStatus 값을 통해 확인할 수 있다.
1. Query Status
✅ query status는 'pending', 'success', 'error'의 상태값 중 하나를 가지게 됩니다.
pending: 아직 데이터를 받아오지 못했을 때를 의미error: 데이터를 받아오는 중에 에러가 발생했음을 뜻합니다.success: 데이터를 성공적으로 받아왔음.
이 상태 값들은 각각 isPending, isError, isSuccess와 매칭이 되는데요. 이 값들을 이용해 현재 쿼리의 상태가 어떤지 확인할 수 있습니다.
useQuery()의 결괏값을 콘솔에 찍어보면 결괏값이 두 번 출력이 되는데요. 이 중 첫 번째 결괏값을 살펴보면 status가 'pending' 상태임을 볼 수 있습니다.
가장 처음 컴포넌트가 마운트되고(DOM 트리에 추가되고) useQuery()가 실행되면서, 데이터를 아직 받아오기 전이므로 'pending' 상태가 되는 것이죠. 그 후에 찍힌 두 번째 결괏값을 살펴보면 status가 'success'로 되어 있고, data 항목에서 실제 데이터들도 확인할 수 있습니다.
2. Fetch Status
우리가 useQuery()를 사용할 때 쿼리 함수라는 걸 queryFn으로 등록해 줬는데요. 이 쿼리 함수의 실행 상태를 말해주는 값이 바로 fetch status입니다.
✅ fetch status도 총 세 가지 상태 값을 가진다.
-
fetching: 현재 쿼리 함수가 실행되는 중일 때 -
paused: 만약 쿼리 함수가 시작은 했는데 실제로 실행되고 있지는 않을때
(대표적으로 네트워크가 오프라인이 된 경우) -
idle: 쿼리 함수가 어떤 작업도 하고 있지 않은 상황
(fetching상태도 아니고paused상태도 아닌 경우.)
3. status 흐름
먼저 처음으로 컴포넌트가 마운트되어 useQuery()가 실행되면, 데이터를 아직 받아오지 못했기 때문에 query status는 'pending'이 됩니다. 그리고 쿼리 함수가 실행되면서 fetch status는 'fetching' 상태가 되죠.
만약 네트워크 상태가 오프라인일 때 쿼리 함수가 실행된다면, fetch status는 'paused' 상태로 가게 됩니다.
데이터를 성공적으로 받았다면 query status는 'success'가 되고, 만약 데이터를 받아오는 과정에서 에러가 발생했다면 'error' 상태가 됩니다.
fetch status는 데이터를 성공적으로 가져왔는지 여부에 상관없이, 쿼리 함수의 실행이 끝나면 'idle' 상태가 되고요. 그 후에 데이터를 서버에서 다시 받아오는 refetch 작업이 발생하면 쿼리 함수가 재실행되면서 다시 'fetching' 상태로 가게 됩니다.
💡 정리
이처럼 query status와 fetch status는 엄연히 독립적인 상태이기 때문에, 상황에 따라 query status와 fetch status가 다양한 조합의 형태로 나타날 수 있습니다.
이상적인 상황에서는 "pending & fetching" 상태에서 "success & idle" 상태가 되겠지만, 에러가 발생하는 경우 "error & idle" 상태가 될 수도 있고요. "success & idle" 상태에서 데이터를 refetch하게 되면 "success & fetching" 상태가 되기도 합니다.
이처럼 query status와 fetch status 값을 잘 활용하면, 다양한 상황에 맞춰 디테일한 구현을 할 수 있습니다.
