📄 tanstack/query/v5/docs/framework/solid/guides/suspense

import { Suspense } from 'solid-js'
;<Suspense fallback={<LoadingSpinner />}>
  <SuspendableComponent />
</Suspense>


import { Suspense } from 'solid-js'
;<Suspense fallback={<LoadingSpinner />}>
  <SuspendableComponent />
</Suspense>

You can use async suspense function that is provided by solid-query.

tsx

import { useQuery } from '@tanstack/solid-query'

const todoFetcher = async () =>
  await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
    response.json(),
  )

function SuspendableComponent() {
  const query = useQuery(() => ({
    queryKey: ['todos'],
    queryFn: todoFetcher,
  }))

  // Accessing query.data directly inside a <Suspense> boundary
  // automatically triggers suspension until data is ready
  return <div>Data: {JSON.stringify(query.data)}</div>
}


import { useQuery } from '@tanstack/solid-query'

const todoFetcher = async () =>
  await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
    response.json(),
  )

function SuspendableComponent() {
  const query = useQuery(() => ({
    queryKey: ['todos'],
    queryFn: todoFetcher,
  }))

  // Accessing query.data directly inside a <Suspense> boundary
  // automatically triggers suspension until data is ready
  return <div>Data: {JSON.stringify(query.data)}</div>
}

Fetch-on-render vs Render-as-you-fetch
--------------------------------------

Out of the box, Solid Query in suspense mode works really well as a Fetch-on-render solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a Render-as-you-fetch model, we recommend implementing Prefetching on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components.

Edit on GitHub

Default Query Fn

Testing

Partners Become a Partner

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)

scarf analytics