[React] ReactQuery 순환 참조

JavaScript 객체 초기화 순서와 const 객체 참조 구조 때문에 생기는 “실행 시점 의존성” 문제

객체 리터럴 내부에서 자기 자신 참조는 시점상 정의 전 참조가 된다.

 

export const pageMngQueryKeys = {
  all: ['pageMng'] as const,
  detail: (id: number) =>
    [...pageMngQueryKeys.all, 'detail', id] as const,
};

여기서 pageMngQueryKeys.detail은 객체 초기화가 아직 끝나지 않은 시점에 pageMngQueryKeys.all을 참조

 

즉, pageMngQueryKeys는 아직 완전히 만들어지지 않았는데 그걸 내부에서 쓰고 있음 → undefined.all → 런타임 에러

 

왜 로컬환경에선 안되고 개발계에선 될까

아마도 아래 이유 중 하나?

Vite 개발 서버 (HMR)	모듈 캐시가 살아있어서 간혹 우연히 동작함
프로덕션 빌드	정적 분석에서 warning 또는 undefined 가능성
Jest 등 테스트	거의 확정적으로 undefined 발생
Node.js ESM 직접 실행	순환 의존으로 함수 호출 시점에 터짐

Vite 모듈 캐시가 살아있어서 그런듯 하다.

 

export const pageMngQueryKeys = {
  ...
  detail: (pageId: number) => ['pageMng', 'detail', pageId] as const,
};

 

기존 담당자가 수정하고 테스트했을 땐 캐시 때문에 정상 동작했던 것 같다.