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์ด ํญ์ ์ฑ๊ณตํ๋ฏ๋ก ์ฑ๊ณตํ ๊ฒฝ์ฐ์๋ง ์ง์คํ ์ ์์ต๋๋ค.