1. Query Status

실제로 받아온 data 값이 있는지 없는지 나타내는 상태값

1) 상태값의 종류

• pending : 아직 상태값을 받아오지 못한 상태 - isPending
• success : 데이터를 성공적으로 받아 온 상태 - isSuccess
• error : 데이터를 받아오는 중에 에러가 발생한 상태 - isError

useQuery()의 결과값을 콘솔에 찍어보면 결과값이 두번 나타나는데 첫번째 isPending은 true이고 두번째는 false이다.

반대로 isSuccess는 첫번째가 false 두번째가 true이다.

가장 처음 컴포넌트가 마운트되고(DOM 트리에 추가되고) useQuery()가 실행되면서, 데이터를 아직 받아오기 전이므로 'pending' 상태가 되는 것이다.

2. Fetch Status

queryFn() 함수가 현재 실행되는 중인지 아닌지를 나타낸다.

fetchStatus값을 통해 확인가능

1) 상태값의 종류

useQuery()를 사용할 때 쿼리 함수라는 걸 queryFn으로 등록. 이 쿼리 함수의 실행 상태를 말해주는 값이 바로 fetch status이다.

• fetching : 현재 쿼리 함수가 실행되는 중일 때
• paused : 쿼리 함수가 시작은 했는데 실제로 실행되고 있지는 않을 때 ex) 네트워크가 오프라인이 되었을 때
• idle : 쿼리 함수가 어떤 작업도 하고 있지 않은 상황, 'fetching' 상태도 아니고 'paused' 상태도 아닐 때

2) fetch의 진행

• useQuery()가 실행되면, 데이터를 아직 받아오지 못했기 때문에 query status는 'pending'이 된다. 쿼리 함수가 실행되면서 fetch status는 'fetching'이 된다.

• 네트워크 상태가 오프라인일 때 쿼리 함수가 실행된다면, fetch status는 'paused' 상태가 된다.

• 데이터를 성공적으로 받았다면 query status는 'success'가 되고, 만약 데이터를 받아오는 과정에서 에러가 발생했다면 'error' 상태가 된다.

• fetch status는 데이터를 성공적으로 가져왔는지 여부에 상관없이, 쿼리 함수의 실행이 끝나면 'idle' 상태가 되고요. 그 후에 데이터를 서버에서 다시 받아오는 refetch 작업이 발생하면 쿼리 함수가 재실행되면서 다시 'fetching' 상태로 가게 된다.

3. 정리

상황에 따라 query와 fetch는 다양한 조합으로 나타날 수 있다.

1. 이상적 상황 : pending & fetching에서 success & idle 상태가 된다.
2. 에러 발생 : 에러가 발생하면 error & idle 상태가 된다.
3. refetch : success & idle에서 refetch를 하면 success & fetching 상태