usePrefetchQuery
usePrefetchQuery๋ ์๋ฌด๊ฒ๋ ๋ฐํํ์ง ์์ผ๋ฉฐ, useSuspenseQuery๋ฅผ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ํํ๋ suspense boundary๊ฐ ๋ ๋ ๋๊ธฐ์ ์ prefetch๋ฅผ ๋ฐ์์ํค๋ ๋ฐ์ ์ฌ์ฉํฉ๋๋ค.
import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
const PostPage = ({ postId }) => {
usePrefetchQuery({
queryKey: ['posts', postId],
queryFn: () => getPost(postId),
}) // suspense๊ฒฝ๊ณ ์ ์ prefetch๋ฅผ ๋ฐ์ ์ํค๋ ๋ฐ์ ์ฌ์ฉํฉ๋๋ค
return (
<Suspense fallback={<div>Loading...</div>}>
<Post postId={postId} />
</Suspense>
)
}
export const Post = ({ postId }) => {
const { data } = useSuspenseQuery({
queryKey: ['posts', postId],
queryFn: () => getPost(postId),
})
return <>...</>
}