프로젝트/SEB 44 main-project

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

2023. 7. 24. 20:35

 

 

마지막 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 

'프로젝트 > SEB 44 main-project' 카테고리의 다른 글

[Refactor] 재사용 가능한 버튼 컴포넌트 만들기(styled components)  (0) 2023.08.16
[Refactor/Architecture] 좋은 폴더구조를 찾기 위한 여정  (0) 2023.08.07
[Refactor/ESlint] ESlint-plugin-import로 import문 순서 린팅하기  (0) 2023.08.01
[회고] SEB_FE JOYING 프로젝트 회고(2023.06 ~ 2023.07)  (4) 2023.07.26
flex.. 너는 까도 까도 계속 나오는 양파 같다  (0) 2023.07.19
'프로젝트/SEB 44 main-project' 카테고리의 다른 글
  • [Refactor/Architecture] 좋은 폴더구조를 찾기 위한 여정
  • [Refactor/ESlint] ESlint-plugin-import로 import문 순서 린팅하기
  • [회고] SEB_FE JOYING 프로젝트 회고(2023.06 ~ 2023.07)
  • flex.. 너는 까도 까도 계속 나오는 양파 같다
JeanneLee57
JeanneLee57
공부하고 기록을 남기는 개발자 Jeanne
JeanneLee57
코딩은 진리
JeanneLee57
전체
오늘
어제
  • 분류 전체보기 (117)
    • Javascript (15)
    • React (15)
    • Next.js (8)
      • Next.js 베타 문서 번역 (5)
    • 프로젝트 (34)
      • 미니 프로젝트 & 과제 (25)
      • SEB 44 pre-project (1)
      • SEB 44 main-project (8)
    • 알고리즘 (12)
    • 부트캠프 준비 (6)
    • 기술면접 (3)
    • CS (7)
    • 코드스테이츠 프론트엔드 부트캠프 (12)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • 부트캠프준비
  • Next.js
  • 구조분해할당
  • CSS
  • 프로그래머스
  • 프리코드캠프
  • 코드스테이츠
  • RTK
  • 고차함수
  • 알고리즘
  • JavaScript
  • 프론트엔드
  • 회고
  • codestates
  • HTML
  • 유데미
  • 부트캠프
  • react
  • useEffect
  • 번역

최근 댓글

최근 글

hELLO · Designed By 정상우.
JeanneLee57
[React-Query] enabled: false로 남은 쿼리는 isLoading 상태다
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.