[React-Query] enabled: false로 남은 쿼리는 isLoading 상태다

 

 

마지막 3차 개발자 테스트를 하는데 관리자 권한으로 컨텐츠를 삭제하는 기능을 테스트하다가 이미 삭제한 컨텐츠의 페이지에 들어가니 다음과 같은 이상한 화면을 마주하게 되었다.

 

저 희미한 동그라미들은 아이템 로딩 중의 스켈레톤 ui인데, 분명 쿼리가 에러로 전환되야 맞을 텐데 저 상태로 정지해 버려서 이상하다는 생각이 들었다. 내가 코드를 짠 부분이 아니라서 그 부분의 코드를 살펴보니 컨텐츠의 상세 정보를 받아와야만 그 컨텐츠와 연관된 다른 컨텐츠들을 받아오도록 다음과 같이 짜여 있었다.

const {
    isLoading: filteredLoading,
    error: filteredError,
    data: filteredData,
    isSuccess: filteredSuccess,
  } = useQuery({
    queryKey: ['filteredContent', contentId],
    queryFn: () =>
      GetFilterdData(
        `/medias/${category}?genre=${detailData?.genre.join(',')}`
      ),
    enabled: !!detailData, // true가 되면 filteredData를 실행한다
  });

  if (detailLoading || filteredLoading) {
    return (
      <S_Wrapper>
        <S_Text>이런 컨텐츠는 어떠세요?</S_Text>
        <RecommendContentLoading />
      </S_Wrapper>
    );
  }

상식적으로는 이상할 게 없는 코드인데, 리액트 쿼리에서는 enabled: false 상태인 쿼리를 isLoading으로 본다고 한다. 물론 정상적으로 컨텐츠 상세 정보가 조회되었다면 enabled: false인 동안은 로딩 상태라고 보는 것이 맞겠지만, 에러가 떠서 enabled: true로 전환되지 않는 쿼리까지도 계속 로딩 중인 상태로 본다면 곤란하다. 받아올 수 있는 데이터가 없다면 로딩 중인 상태에서 벗어나서 에러 처리로 넘어가도록 해야 한다.

 

이런 상황을 위해 isInitialLoading을 사용할 수 있다. isInitialLoading은 isLoading && isFetching과 같은 상태로, enabled: true가 되어 데이터를 페칭 중인 상태이면서, 동시에 로딩 중인 상태라고 할 수 있을 것이다.

 

위 코드에서 isLoading을 isInitialLoading으로 바꿔줬더니 스켈레톤 ui가 뜬금없이 동동 떠있는 현상이 사라지고 에러 처리 단계로 넘어갈 수 있게 되었다. 

 

---

내가 보려고 정리하는 참고자료

https://github.com/TanStack/query/issues/3584

https://yiyb-blog.vercel.app/posts/react-query-loading-state