useSuspenseQuery는 TanStack Query의 결과를 Suspense와 에러 경계(Error Boundary)에 맡기는 훅이다. 로딩 중이면 컴포넌트가 suspend되고, 실패하면 에러가 던져진다. 그래서 컴포넌트 안에는 성공한 경우의 코드만 남는다.
function Profile() {
const { data } = useSuspenseQuery({ queryKey: ['user'], queryFn: fetchUser })
return <div>{data.name}</div> // data는 항상 정의됨
}
<ErrorBoundary fallback={<ErrorView />}>
<Suspense fallback={<Spinner />}><Profile /></Suspense>
</ErrorBoundary>data가undefined일 수 없다. 타입이 바로 확정돼 옵셔널 체이닝과 null 검사가 사라진다- 여러 컴포넌트의 로딩을 경계 하나로 묶어 보여 주기 쉽다
enabled가 없다. 항상 실행되는 것이 전제라 조건부 요청은 일반useQuery로 한다- 워터폴(Request Waterfall) 주의: 같은 컴포넌트에
useSuspenseQuery를 두 번 쓰면 첫 번째에서 suspend되어 두 번째 요청이 늦게 시작된다. 병렬로 기다리려면useSuspenseQueries를 쓰거나 미리 prefetch한다 - 백그라운드 재요청 상태(
isFetching)를 UI에 세밀하게 반영하거나 컴포넌트 단위로 스피너를 다루려면 일반useQuery가 유연하다
"이 데이터가 없으면 화면을 그릴 수 없다"가 분명하고 Suspense 기반 구조를 쓰는 앱에 맞는다. 기본기는 TanStack Query, React 자체의 Promise 읽기는 use()로 Promise 읽기.