[React-query] Query Status / Fetch Status

🏷️ Query Status

Query Status는 실제로 받아 온 data 값이 있는지 없는지를 나타내는 상태 값으로,

이전 글의 useQuery() 결과값에서 봤던 status 값을 통해 확인이 가능하다.

Query Status는 pending, success, error의 세 가지 상태 값 중 하나를 가지게 된다.

pending은 아직 데이터를 받아오지 못했을 때를 의미하며, error는 데이터를 받아오는 중에 에러가 발생했음을 의미한다.

그리고, 데이터를 성공적으로 받아오게 되면 success 값을 가지게 된다.

앞서 언급했던 세 가지 상태 값들은 각각 isPending, isError, isSuccess와 매칭이 되며, 이 값들을 이용해 현재 query의 상태가 어떤지 확인할 수 있다.

🏷️ 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 상태로 가게 된다.