[React] React Query: "enabled: false"인데 왜 자꾸 fetch가 튀어 나갈까? (feat. PR #3223)

 

https://tanstack.com/query/latest

"제 enabled가 무시당했습니다만??”

 

 

분명히 enabled: false를 걸어놨는데, refetch()를 부르니 API가 호출된다. "어? 나 비활성화한 것 같은데 왜 동작해?"라고 당황했다면 축하한다. 지극히 정상이다. 오늘은 이에 대해 알아보자.

 

---

enabled와 refetch의 관계

보통 특정 데이터가 준비 안 됐을 때 API 자동 호출을 막으려고 enabled: false 옵션을 쓴다. 그런데 이 상태에서도 useQuery에서 꺼낸 refetch()를 직접 실행하면? 설정값을 무시하고 무조건 요청이 발생한다.

결론부터 말하자면, 이건 버그가 아니라 리액트 쿼리의 설계이다.

 

 

 

원인: "자동"과 "수동"의 명확한 선 긋기

이건 라이브러리 설계팀의 의도된 동작(Expected behavior)이다.

• 자동 vs 수동: enabled 옵션은 마운트, 윈도우 포커스, 네트워크 재연결 같은 자동 트리거(Automatic trigger) 상황만 방어한다. 즉, "상태에 따른 자동 실행"을 제어하는 선언적 도구다.
• 우회 수단: 반면 refetch()는 개발자가 코드에서 명시적으로 실행하는 수동 명령(Manual trigger)이다.
• TkDodo(메인테이너) 가라사대: "refetch는 enabled 옵션을 우회할 수 있는 유일한 무조건적 페치(unconditional fetch)다."

https://tkdodo.eu/blog/practical-react-query#the-enabled-check-is-very-powerful

Practical React Query

 

 

PR #3223, 여기서 뭐가 변했나?

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

fix(core): do not refetch disabled queries by TkDodo · Pull Request #3223 · TanStack/query

 

예전에는 invalidateQueries 같은 전역 명령을 내리면 enabled: false인 쿼리도 'inactive' 상태로 잡혀서 리패치되는 버그가 있었다고 한다. 이걸 해결한 PR #3223의 핵심은 다음과 같다.

• 해결: invalidateQueries나 refetchQueries가 불려도, 비활성화된 쿼리는 전역 리패치 대상에서 뺀다.
• 결과: 시스템이 자동으로 부르는 건 막되, 개발자가 직접 누르는 *수동 refetch()는 여전히 일하도록 설계 철학을 지켰다.

 

 

 

요약

• enabled는 자동 실행을 막는 옵션이다.
• refetch()는 개발자의 의지를 담은 창이라 방패를 뚫는다.
• 고로 "리패치 호출 시 enabled 무시"는 에러가 아니라 피처다.

 

 

---

팁: "진짜로" 호출을 막고 싶다면?

조건문을 한 번 더 써서 `refetch` 호출을 막았다. 

기존

const initData = () => {
  // selectId, id 둘 다 있을 때만 조회
  if (selectId && id) {
    refetchDetail();
    refetchList();
    refetchFileList();
  }
};

변경

호출부 앞에 if 하나를 추가했다.

const initData = () => {
  // selectId, id 둘 다 있을 때만 조회
  if (selectId && id) {
    refetchDetail();
    refetchList();
    if (
      !isLoadingDetail && data?.expectRsltFileGroupNo
    ) {
      refetchFileList();
    }
  }
};

 

 

출처 및 참고 자료

[1] refetch does not respect enabled false · Issue #1965

[2] stale option doesn't work in refetch method · Discussion #4432

[3] React-Query and using enabled false but it keeps refetching...

[4] fix(core): do not refetch disabled queries · PR #3223

[5] How to prevent react-query from fetching initially but enables refetching?

[6] useQuery | TanStack Query React Docs

[15] Is there a way to prevent fetching when refetch method get called?

https://tkdodo.eu/blog/practical-react-query#the-enabled-check-is-very-powerful