usePrefetchQuery

The usePrefetchQuery does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses useSuspenseQuery.


import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
 
const PostPage = ({ postId }) => {
  usePrefetchQuery({
    queryKey: ['posts', postId],
    queryFn: () => getPost(postId),
  }) // Prefetch query before suspense boundary
 
  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),
  })

  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