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 <>...</>
}

import { Suspense } from '@suspensive/react'
import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
import { useState } from 'react'

export const Example = () => {
  const [postId, setPostId] = useState(1)
  usePrefetchQuery({
    queryKey: ['posts', postId],
    queryFn: () => getPost(postId),
  }) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다

  return (
    <div>
      <button
        onClick={() => setPostId((prev) => prev - 1)}
        disabled={postId === 1}
      >
        Previous Post
      </button>
      <button
        onClick={() => setPostId((prev) => prev + 1)}
        disabled={postId === 100}
      >
        Next Post
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <Post postId={postId} />
      </Suspense>
    </div>
  )
}

const Post = ({ postId }: { postId: number }) => {
  const { data } = useSuspenseQuery({
    queryKey: ['posts', postId],
    queryFn: () => getPost(postId),
  })

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  )
}

const getPost = (postId: number) =>
  fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then<{
    id: number
    title: string
    body: string
  }>((res) => res.json())

Open Sandbox