useSuspenseQuery
์ด hook์ return ํ์
์๋ isLoading, isError์ด ์์ต๋๋ค. <Suspense/>
์ <ErrorBoundary/>
๊ฐ ์ด hook์ data๋ฅผ ๋ณด์ฅํด์ฃผ๊ธฐ ๋๋ฌธ์
๋๋ค. ๋ํ, ์ด hook์ options์๋ ๊ธฐ๋ณธ์ ์ผ๋ก suspense๊ฐ true์
๋๋ค. ํ์ํ ์ options๋ @tanstack/react-query์ useQuery์ฒ๋ผ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค.
import { useSuspenseQuery } from '@suspensive/react-query'
const Example = () => {
const query = useSuspenseQuery({
queryKey,
queryFn,
}) // suspense: true๊ฐ ๊ธฐ๋ณธ์
๋๋ค.
// isSuccess์ผ๋ก type narrowing์ด ํ์ํ์ง ์์ต๋๋ค.
query.data // TData
}
๋๊ธฐ
@tanstack/react-query์์ suspense ์ต์
์ ์ฌ์ฉํ๋ฉด, useQuery๋ฅผ <Suspense/>
and <ErrorBoundary/>
์ ํจ๊ป ์ฌ์ฉํ ์ ์์ต๋๋ค.
import { useQuery } from '@tanstack/react-query'
const Example = () => {
const query = useQuery({
queryKey,
queryFn,
suspense: true,
})
query.data // TData | undefined
if (query.isSuccess) {
query.data // TData
}
}
useQuery์ return ํ์
(query.data)์ ์ด ์ปดํฌ๋ํธ์ ๋ถ๋ชจ์ธ <Suspense/>
์ <ErrorBoundary/>
๋๋ถ์ ํญ์ ์ฑ๊ณตํ ๊ฒฝ์ฐ์ผ ๊ฒ์
๋๋ค.
ํ์ง๋ง @tanstack/react-query๋ ํ์
์คํฌ๋ฆฝํธ ํ์
์ ์ผ๋ก ์ด๊ฒ์ ํํํ์ง ์์ต๋๋ค.
์ด๊ฒ์ด @suspensive/react-query๊ฐ useSuspenseQuery๋ฅผ ์ ๊ณตํ๋ ์ด์ ์ ๋๋ค.
์ฑ๊ณตํ ์ผ์ด์ค์ ์ง์คํ์ธ์.
์ด์ ์ฐ๋ฆฌ๋ ์ปดํฌ๋ํธ ๋ด๋ถ์์ fetching์ด ํญ์ ์ฑ๊ณตํ๋ฏ๋ก ์ฑ๊ณตํ ๊ฒฝ์ฐ์๋ง ์ง์คํ ์ ์์ต๋๋ค.