useQuery 동작 방식

Person

Checkbox

Suspense를 적용하다가 같은 key의 useQuery가 여러 컴포넌트(?) 에서 호출되면

suspense가 적용되지 않는 이슈를 발견했습니다.( 사실 제가 잘 몰라서 그런 것 같습니다. 🥹)



const ChatRoomListContent = () => {
  return (
    <>
      <ErrorBoundary
        fallback={
          <DefaultErrorTemplate onClickButton={() => console.log('재시도')} />
        }
      >
        <Suspense fallback={<Loading />}>
          <ChatRoomList />
        </Suspense>
      </ErrorBoundary>
    </>
  )
}
export default ChatRoomListContent


const ChatRoomList = () => {
  const router = useRouter()
  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
    useChatRoomsQuery()
	//생략...
}

ChatRoomList 내부에서 useInfiniteQueries(useChatRoomsQuery)를 호출하고 있는데요.

이 상태에서는 suspense와 errorBoundary가 로딩과 오류를 잘 캐치합니다.

그런데 필요에 의해 아래와 같이 ChatRoomListContent에 useChatRoomsQuery를 호출하면

Suspense와 ErrorBoundary가 작동하지 않습니다.



const ChatRoomListContent = () => {
	const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
    useChatRoomsQuery()
  return (
    <>
			<ChatRoomTab/>
      <ErrorBoundary
        fallback={
          <DefaultErrorTemplate onClickButton={() => console.log('재시도')} />
        }
      >
        <Suspense fallback={<Loading />}>
          <ChatRoomList />
        </Suspense>
      </ErrorBoundary>
    </>
  )
}
export default ChatRoomListContent

원인이 뭘까요…? 구글링 챗 gpt 찾아봐도 잘 나오지 않습니다…(잘 검색을 못한걸수도 있습니다 ㅠ)