5. React Query의 Status

1. 쿼리 상태와 페치 상태

React Query는 현재 상태를 알려주는 플래그를 제공한다.

내부 상태 머신에서 파생된 여러가지 boolean 플래그 값을 제공하는데,

선언된 타입을 보면 쿼리상태, 페치상태가 각각 3가지씩 존재한다.

• 쿼리상태 : 데이터(캐시)에 대한 정보
  • success: 쿼리가 성공했고, 이에 대한 data가 쿼리캐시에 설정된다.
  • error: 쿼리가 실패했고, error가 설정된다.
  • pending: 쿼리캐시에 데이터가 없다.
• 페치상태: Fn에 대한 정보
  
  • fetching: queryFn 요청이 실행중이고 데이터를 기다리고 있다.
  • paused: queryFn, mutationFn 이 실행중이지 않고 다시 인터넷에 연결될 때 까지 일시중지된 상태이다.(offline)
  • idle: ~Fn이 실행중이 아니다.

쿼리상태와 페치상태는 서로 독립적이다.

또한 각 상태 내부에서는 하나의 상태만 가질 수 있다.

즉 fetching이면서 success일 수 있고, fetching이면서 error일 수 있지만,

pending 이면서 success 일 수는 없다!

useQuery와 useMutation의 플래그

 

위는 내부 상태 머신에서 파생된 여러가지 boolean 플래그 값이다.

캐시 상태정보인 쿼리상태와 함수 상태정보인 페치상태를 잘 알고있다면 적절히 써먹을 수 있다.

 

참고로 isLoading 은 isPending && isFetching을 의미한다. (캐시가 없고, 요청중)

즉 그 쿼리의 첫번째 fethcing 이라는 의미이다.

2. 표준 예시

const todos = useTodos()

if (todos.isPending) {
  return 'Loading...'
}
if (todos.error) {
  return 'An error has occurred: ' + todos.error.message
}

return <div>{todos.data.map(renderTodo)}</div>

위 예시는 쿼리가 요청중인지, 에러인지를 순서대로 확인하고 데이터를 렌더링한다.

대부분의 경우 괜찮지만 React Query가 제공하는 백그라운드 페칭(refetchOnMount, refetchOnWindowFocus 그리고 refetchOnReconnect) 때문에 UX가 나빠질 수 있다.

 

어떤 문제가 발생하는지 알아보자.

3. 백그라운드 에러

많은 상황에서 백그라운드 페칭이 실패하면 조용히 무시될 수 있지만, 위 코드에서는 불가능하다.

일어날 수 있는 상황을 보자.

• 사용자가 페이지를 열고 첫번째 쿼리가 성공한다. 이후 잠시동안 다른 탭에서 작업하다가 페이지로 다시 돌아오면 React Query가 백그라운드 페칭을 한다. 그리고 페칭이 실패한다.
• 사용자가 아이템 목록 페이지에 들어온다. 아이템 하나를 골라 클릭한다. 쿼리가 성공하고 목록 페이지로 돌아온다. 이제 다시 그 아이템 페이지로 들어가면 캐시에 남아있는 데이터를 볼 것이다. 하지만 이때 백그라운드 페칭이 실패한다.

위 두 상황에서 쿼리의 상태는 다음과 같다.

{
  "status": "error",
  "error": { "message": "Something went wrong" },
  "data": [{ ... }]
}

보다시피 사용 가능한 오래된 데이터와 에러가 공존한다.

이는 오래된 캐싱을 사용하면서 유효성을 다시 검사하는 (stale-while-revalidate caching) 메커니즘을 이용하기 때문이다.

즉 오래된 데이터라 할지라도, 존재한다면 보여준다.

 

이제 다시 표준예시를 살펴보면..

const todos = useTodos()

if (todos.isPending) {
  return 'Loading...'
}
// 캐시가 남아있지만 백그라운드 페칭 때 에러가 발생한다.
if (todos.error) {
  return 'An error has occurred: ' + todos.error.message
}

return <div>{todos.data.map(renderTodo)}</div>

캐시가 남아있지만 백그라운드 페칭 때 데이터 대신 에러가 렌더링되는 문제가 발생한다.

 

이제 어떤 것을 우선해서 보여줄지는 우리에게 달려있다.

에러를 보여주는게 중요할까? 오래된 데이터가 있는 경우 데이터만 표시하는 것으로 충분할까?

아니면 둘 다 표시하고 에러는 토스트로 보여주면 어떨까?

 

구현은 요구사항에 따라 달라질 것이므로  이 질문에 대한 명확한 답변은 없다.

하지만 위 두가지 예시를 고려할때 렌더링 되어있는 캐시 데이터가 갑자기 에러 화면으로 바뀐다면 혼란스러운 사용자 경험을 줄 수 있을 것 같다.

 

React Query가 실패한 쿼리는 세번까지 다시 시도하므로, 에러 화면으로 대체될 때까지 몇 초가 걸릴 수 있기 때문에 더 문제가 될 수도 있다. 사용자는 그 몇 초동안 아무런 피드백을 받을 수 없기 때문이다.

 

이러한 이유로 캐시 데이터를 먼저 확인하는 방법이 있다.

const todos = useTodos()

if (todos.data) {
  return <div>{todos.data.map(renderTodo)}</div>
}

if (todos.error) {
  return 'An error has occurred: ' + todos.error.message
}

return 'Loading...'

다시 말하지만 구현은 요구사항에 따라 달라지기 때문에 "옳은 방법"은 없다.

다만 개발자로서 React Query의 공격적인 리페칭이 가져올 수 있는 결과를 알고있어야한다.

 

추가) 백그라운드 페칭 에러만 토스트로 보여주기

 

Reference

https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientisfetching

https://tkdodo.eu/blog/status-checks-in-react-query