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, queryOptions } from '@suspensive/react-query'
 
const PostPage = ({ postId }) => {
  usePrefetchQuery(query.post(postId)) // Prefetch query before suspense boundary
 
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Post postId={postId} />
    </Suspense>
  )
}
 
export const Post = ({ postId }) => {
  const { data } = useSuspenseQuery(query.post(postId))
 
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  )
}
 
const query = {
  post: (postId) =>
    queryOptions({
      queryKey: ['posts', postId],
      queryFn: () => getPost(postId),
    }),
}

import { Suspense } from '@suspensive/react'
import { usePrefetchQuery } from '@suspensive/react-query'
import React from 'react'
import { Post } from './Post'
import { query } from './query'

export const Example = () => {
  const [postId, setPostId] = React.useState(1)
  usePrefetchQuery(query.post(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>
  )
}

Open Sandbox

useSuspenseInfiniteQuery queryOptions