api를 3개를 호출 받고 각각 컴포넌트를 그리고 있었다.
그래서 최상위 페이지에 Query 옵션을 suspense: true; 추가 했었는데 문제는 사용자의 액션에따라 재랜더링이 한 컴포넌트에서만 이루워져야하는데 3개의 컴포넌트에서 재랜더링이 이루어지고 있어서 분리 작업을 진행했다.

퇴근길에 마주친 알람들...
그리고 에러...
다시 회사로 발길을 돌려 오류를 파악하고 해결을 했다.
(;;;;;;;;;;;;;;)

🤦🏻‍♀️ why?

장애가 난 이유는 최상위 페이지에 suspense를 true 해 놓은 것이 이유였다.

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      retryDelay: 2_000,
      staleTime: 60 * 1_000,
      cacheTime: 300 * 1_000,
      refetchOnWindowFocus: true,
      keepPreviousData: true,
      suspense: true,
    },
  },
});

suspense로 컴포넌트를 감싸는 것만 분리를 해놨을 뿐 true로 설정을 최상위에서 했기에 오류가 났던 것...
그럼 이제 suspense를 지워보고 테스트 해보자. (default 값이 false임)

<Suspense fallback={<Loading title="불러오는 중입니다" />}>
	<Compontents />
</Suspense>

false이기에 Loading이 나오면 안된다.
근데... 작동을 한다!

하루를 고민했다.
true로 설정한 것이 없는데 왜 Loading 이미지가 나오는 걸까?

...이유는
component lazyRetry함수를 사용 하고 있어서 이다.
lazyRetry 함수는 주어진 비동기 함수 components를 실행하고, 그 결과로 얻은 Promise를 반환하기에 Suspense가 이를 catch하고, Promise가 pending 상태이면 LoadingFallback을 return 한 것이다.

참고
Suspense: https://happysisyphe.tistory.com/54
lazy: https://velog.io/@adguy/React.lazy-%EC%99%9C-%EC%93%B0%EB%8A%94%EA%B0%80