PrefetchInfiniteQuery
React hook์ ์ ์ฝ์ ํผํด JSX์์์๋ usePrefetchInfiniteQuery๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํ๋ ์ปดํฌ๋ํธ์ ๋๋ค.
import {
PrefetchInfiniteQuery,
useSuspenseQuery,
} from '@suspensive/react-query'
import { InView } from '@suspensive/react-dom'
const PostsPage = () => {
const { data: posts } = useSuspenseQuery({
queryKey: ['posts'],
queryFn: () => getPosts(),
})
return posts.map((post) => (
<InView>
{({ ref, isInView }) => (
<>
{isInView ? (
// ๐ซ React hook์ ์ ์ฝ์ผ๋ก usePrefetchInfiniteQuery๋ฅผ ์ฌ์ฉํ์ง ๋ชปํฉ๋๋ค
// usePrefetchInfiniteQuery({
// queryKey: ['posts', post.id, 'comments'],
// queryFn: () => getPostComments(post.id),
// })
// โ
Post Comments ํ์ด์ง์ ๋ค์ด๊ฐ๊ธฐ ์ ์ ๊ฐ๊ฐ์ post comments query์ ๋ํด usePrefetchInfiniteQuery๋ฅผ ํธ์ถํ ์ ์์ต๋๋ค.
<PrefetchInfiniteQuery
queryKey={['posts', post.id, 'comments']}
queryFn={() => getPostComments(post.id)}
/>
) : null}
<div ref={ref}>
<h2>{post.title}</h2>
<p>{post.description}</p>
<Link to={`/posts/${post.id}/comments`}>See comments</Link>
</div>
</>
)}
</InView>
))
}