useSuspenseInfiniteQuery
이 hook의 return 타입에는 isLoading, isError이 없습니다. <Suspense/>
and <ErrorBoundary/>
가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useInfiniteQuery 처럼 사용하면 됩니다.
import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
const Example = () => {
const query = useSuspenseInfiniteQuery({
queryKey,
queryFn,
}) // suspense 옵션은 true가 기본입니다.
// isSuccess으로 type narrowing이 필요하지 않습니다.
query.data // InfiniteData<TData>
}
동기
@tanstack/react-query에서 suspense 옵션을 사용하면, useInfiniteQuery 를 <Suspense/>
, <ErrorBoundary/>
와 함께 사용할 수 있습니다.
import { useInfiniteQuery } from '@tanstack/react-query'
const Example = () => {
const query = useInfiniteQuery({
queryKey,
queryFn,
suspense: true,
})
query.data // InfiniteData<TData> | undefined
if (query.isSuccess) {
query.data // InfiniteData<TData>
}
}
하지만 useInfiniteQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 <Suspense/>
덕분에 항상 성공한 경우일 것입니다.
이것이 @suspensive/react-query가 useSuspenseInfiniteQuery를 제공하는 이유입니다.
💡
성공한 케이스에 집중하세요.
이제 우리는 컴포넌트 내부에서 fetching이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다.
수정된 날짜: