[Tanstack-Query] isLoading, isFetching, isPending 차이점에 대해

tanstack-query를 사용하면서 useQuery 훅을 사용했을 때 isLoading 주로 사용했었는데 isFetching과 isPending도 있다.

정확하게 어떤 차이점을 가지고 있는지 확인하고 싶어 글을 작성하며 정리하고자 한다.

1. isLoading

먼저 공식 문서를 통해 살펴 보자.

해당 값은 최초 첫 번째 fetch가 될 때 true 값을 가진다.

그리고 해당 값은 isFetching && isPending 로 연산을 한 값과 동일하다.

즉, isFetching과 isPending 이 모두 true 면 해당 값도 true가 된다.

2. isFetching

해당 값은 fetchStatus 변수에서 파생된 값이라고 한다.

fetchStatus는 아래와 같이 3가지 상태값을 가진다.

• fetching: queryFn이 실행 중일 때 true이며, 초기 pending 상태와 백그라운드 재요청을 포함.
• paused: 쿼리가 데이터를 가져오려고 했지만 일시 중지된(paused) 상태.
• idle: 쿼리가 데이터를 가져오지 않는 상태

즉, fetchStatus: fetching 일 때 isFetching이 true 값을 가지게 될 것이다.

3. isPending

isPending 도 마찬가지로 status에서 파생된 값이다.

status는 아래 3가지 값을 가진다.

• pending: 캐시된 데이터가 없고 쿼리 시도가 아직 완료되지 않은 경우.
• error: 쿼리 시도가 오류를 반환한 경우. 관련된 error 속성에 해당 요청 중 발생한 오류가 포함
• success: 쿼리가 오류 없이 응답을 받고 데이터를 표시할 준비가 된 경우. 관련된 data 속성에 성공적으로 가져온 데이터가 포함되며, 쿼리의 enabled 속성이 false로 설정되어 있고 아직 가져오지 않았다면 data는 초기화 시 제공된 첫 번째 initialData이다.

즉, status: pending 일 때 isPending이 true이다.

간단히 정리를 하자면..
isFetching은 queryFunc을 통해서 데이터를 fetching할 때 true이고 isPending은 캐시된 데이터가 없고 쿼리가 아직 완료되지 않은 상태이다