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