리액트 쿼리가 무한히 재요청하며 마운트가 반복되는 현상 발생

2025-03-24_2.42.13.mov

useQuery({
  queryKey: ['emotionLogToday', userId],
  queryFn: () => (userId ? getEmotionLogToday({ userId }) : Promise.resolve(null)),
  enabled: userId !== null,
});

• userId가 존재할 때만 쿼리가 실행되도록 enabled 조건이 걸려 있었음
• 하지만 useSession에서 user 정보를 비동기로 받아오므로, 초기 렌더링 시 userId가 undefined였다가 나중에 값이 생김
• 이 상태에서 리액트 쿼리는 해당 쿼리를 다시 mount할 때마다 **자동으로 재요청(retryOnMount)**을 시도

즉, enabled와 queryKey 조건이 계속 바뀌면서 쿼리 재요청 → 상태 업데이트 → 재렌더링 → 다시 쿼리 재요청…

useQuery({
  queryKey: ['emotionLogToday', userId],
  queryFn: () => (userId ? getEmotionLogToday({ userId }) : Promise.resolve(null)),
  enabled: userId !== null,
  retryOnMount: false, 
});

retryOnMount: false는 쿼리가 에러 상태일 때 컴포넌트가 다시 마운트되어도 재요청하지 않도록 막는 설정

이걸 추가함으로써 리액트 쿼리가 컴포넌트가 재마운트될 때마다 다시 쿼리를 보내는 것을 방지