useSuspenseInfiniteQuery
Return type of this hook have no isLoading, isError property. because <Suspense/>
and <ErrorBoundary/>
will guarantee this hook's data. In addition, this hook's options have default suspense: true. and you can provide new options to this hook like useInfiniteQuery (opens in a new tab) of @tanstack/react-query.
import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
const Example = () => {
const query = useSuspenseInfiniteQuery({
queryKey,
queryFn,
}) // suspense:true is default.
// No need to do type narrowing by isSuccess
query.data // InfiniteData<TData>
}
Motivation
If you turn suspense on in @tanstack/react-query, You can use useInfiniteQuery (opens in a new tab) with <Suspense/>
and <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>
}
}
but useInfiniteQuery's return type:query.data will be always fulfilled because of <Suspense/>
as parent of this component.
This is why @suspensive/react-query provide useSuspenseInfiniteQuery
💡
Concentrate on only Success
Now, we can concentrate component as any fetching will be always success.