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

useSuspenseInfiniteQuery usePrefetchInfiniteQuery