리액트 쿼리의 Status에는 두 가지 status가 있다.

• query status: 실제로 받아 온 data값이 있는지 없는지를 나타내는 상태 값
• fetch status: queryFn()함수가 현재 실행되는 중인지 아닌지를 나타내는 값

query status는 useQuety()결과값에서 status값을 통해 확인할 수 있고, fetch status는 fetchStatus값을 통해 확인할 수 있다.

Query Status

세 가지 상태 값을 가진다.
'pending' 'success' 'error'의 상태 값 중 하나를 가지게 된다.

pending

아직 데이터를 받아오지 못했을 때

error

데이터를 받아오는 중에 에러가 발생했을 때

success

데이터를 성공적으로 받아왔을 때

이 상태 값들은 각각 isPending, isError, isSuccess와 매칭이 된다.
이 값들을 이용해 현재 쿼리의 상태가 어떤지 확인할 수 있다.

각각의 상태를 직접 확인해보자.
useQuery()의 결괏값을 콘솔에 찍어보면 결괏값이 두 번 출력이 되는데 이 중 첫 번째 결괏값을 살펴보면 status가 pending상태임을 볼 수 있다.

가장 처음 컴포넌트가 마운트되고 (DOM 트리에 추가되고) useQuery()가 실행되면서, 데이터를 아직 받아오기 전이므로 pending상태가 되는 것이다.
그 후에 찍힌 두 번째 결괏값을 살펴보면 status가 success로 되어 있고, data 항목에서 실제 데이터들도 확인할 수 있다.

데이터를 받아 오는 중에 에러가 발생하면 error가 된다.
예를 들어 API 주소를 없는 주소로 바꿔 보거나, 혹은 함수에서 일부러 에러를 만들어 throw해 보면 status가 error로 바뀌고, useQuery()결괏값의 error 값에서 그 에러를 살펴볼 수 있다.

export async function getPosts() {
  const response = await fetch(`${BASE_URL}/posts`);
  const body = await response.json();

  // 일부러 에러 발생
  throw new Error('An error happened.');
  return body;
}

Fetch Status

fetch status도 총 세 가지 상태 값을 가진다.
바로 fetching, paused, idle이다.
useQuery()를 사용할 때 쿼리 함수라는 걸 queryFn으로 등록해줬다.
이 쿼리 함수의 실행상태를 말해주는 값이 바로 fetch status이다.
현재 쿼리 함수가 실행되는 중일 때에는 fetching 상태가 된다.
만약 쿼리 함수가 시작은 했는데 실제로 실행되고 있지는 않다면 paused 상태가 된다.
대표적으로 네트워크가 오프라인이 된 경우 기본적으로 fetch status가 paused상태가 된다.
마지막으로 쿼리 함수가 어떤 작업도 하고 있지 않은 상황, 즉 fetching상태도 아니고 paused상태도 아니라면 idle상태가 된다.

각각의 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값을 잘 활용하면, 다양한 상황에 맞춰 디테일한 구현을 할 수 있다.