[트러블슈팅] 여러 페이지에서 중복된 쿼리 사용 시 에러 발생

문제 상황

• /mypage/channel (파라미터 없음)
• /manage/100/5eonzeu4i2hbjypm (100 = brandId, 5eonzeu4i2hbjypm = spaceId → 파라미터 있음)

두 경로는 동일한 쿼리를 사용하지만, 파라미터 존재 유무에 따라 페이지 이동 시 에러가 발생했다.

원인

React Query는 기본적으로 컴포넌트가 마운트되면 자동으로 쿼리를 실행한다.
하지만 파라미터가 없는 상태에서 실행되면 API 호출이 실패하면서 에러가 발생한다.

해결 방법

React Query의 enabled 옵션을 활용해 조건이 충족될 때만 쿼리가 실행되도록 제어할 수 있다.

아래는 spaceId와 brandId가 존재할 때만 쿼리를 실행하도록 설정한 예시이다:

useQuery({
  queryFn: async () => {
    const result = await getLiveSpacePreview(spaceId);
    return result.data;
  },
  enabled: !!spaceId && !!brandId, // 두 값이 모두 있을 때만 실행
});

 

이 옵션을 추가하면, 두 번째 경로(/manage/...)에서 첫 번째 경로(/mypage/channel)로 이동할 때도 에러 없이 작동한다.