Query Status
리액트 쿼리에 존재하는 두 가지 status : query status, fetch status
-
query status
: 실제로 받아온 data 값이 있는지 없는지를 나타내는 상태 값.
useQuery() 결괏값에서 status 값을 통해 확인 가능. -
fetch status
: queryFn() 함수가 현재 실행되는 중인지 아닌지를 나타냄.
fetchStatus 값을 통해 확인 가능.
pending, success, error
query status는 penidng, success, error 세 가지 상태 값중 하나를 가진다.
- pending : 아직 데이터를 받아오지 못함 (isPending)
- error : 데이터를 받아오는 중에 에러 발생 (isError)
- success : 데이터를 성공적으로 받아옴 (isSuccess)
useQuery()의 결괏값을 콘솔에 찍어보면 결괏값이 두 번 출력되는데,
첫 번째에는 status가 'pending' 상태이다.
가장 처음 컴포넌트가 마운트되고 (DOM 트리에 추가되고) useQuery()가 실행되면서, 데이터를 아직 받아오기 전이므로 pending 상태가 되는 것. 그 이후의 두 번재 값을 보면 status가 success로 되어 있고, data 항목에서 실제 데이터들도 확인 가능하다.
Fetch Status
fetching, paused, idle
useQuery()를 사용할 때 쿼리 함수를 queryFn으로 등록하는데, 이 쿼리 함수의 실행 상태를 알려주는 것이 바로 fetch status이다.
- fetching : 현재 쿼리 함수가 실행되는 중
- paused : 쿼리 함수가 시작은 됐는데 실제로 실행은 되고 있지 않음 (e.g 네트워크가 오프라인인 경우)
- idle : fetching도 paused도 아닌 상태
-
컴포넌트가 마운트되어 useQuery 실행
-
데이터를 아직 받아오지 못해 query status는 pending
-
쿼리 함수가 실행되면서 fetch status는 fetching
-
만약 네트워크가 오프라인일 때 쿼리 함수가 실행되면 fetch status는 paused
-
데이터를 성공적으로 받았다면 query status는 success,
-
데이터를 받아오는 과정에서 에러가 발생했다면 error
-
데이터 가져오기의 성공 여부와 무관하게, fetch status는 쿼리 함수가 끝나면 idle
-
이후 데이터를 서버에서 다시 받아오는 refetch 작업이 발생하면 쿼리 함수 재실행과 함께 fetch status는 fetching으로 변경
➡️ 이처럼 둘은 엄연히 독립적인 상태로, 상황에 따라 다양한 조합의 경우의 수가 존재한다. 이상적으로는 'pending & fetching'에서 'success & idle'로 상태가 변경되겠지만, 에러 발생 시에는 'error & idle'이 될 수도 있다. 'success & idle' 상태에서 데이터를 refetch 하면 'success & fetching'이 되기도 한다.
출처 : 코드잇 React Query
