upstream-tanstack-query/docs/framework/preact/guides/suspense.md

id, title, ref, replace

id	title	ref	replace
suspense	Suspense	docs/framework/react/guides/suspense.md	react-query React preact-query Preact

When using suspense mode, status states and error objects are not needed and are then replaced by usage of the Suspense component from preact/compat (including the use of the fallback prop and error boundaries for catching errors). Please read the Resetting Error Boundaries section for more information on how to set up suspense mode.

placeholderData also doesn't exist for this Query.

Preact does not ship an error boundary component, but one can be built with the useErrorBoundary hook:

import { QueryErrorResetBoundary } from '@tanstack/preact-query'
import { useErrorBoundary } from 'preact/hooks'

function ErrorBoundary({ children, onReset, fallbackRender }) {
  const [error, resetError] = useErrorBoundary()

  if (error) {
    return fallbackRender({
      error,
      resetErrorBoundary: () => {
        onReset()
        resetError()
      },
    })
  }

  return children
}

const App = () => (
  <QueryErrorResetBoundary>
    {({ reset }) => (
      <ErrorBoundary
        onReset={reset}
        fallbackRender={({ resetErrorBoundary }) => (
          <div>
            There was an error!
            <button onClick={() => resetErrorBoundary()}>Try again</button>
          </div>
        )}
      >
        <Page />
      </ErrorBoundary>
    )}
  </QueryErrorResetBoundary>
)

import { useQueryErrorResetBoundary } from '@tanstack/preact-query'

const App = () => {
  const { reset } = useQueryErrorResetBoundary()
  return (
    <ErrorBoundary
      onReset={reset}
      fallbackRender={({ resetErrorBoundary }) => (
        <div>
          There was an error!
          <button onClick={() => resetErrorBoundary()}>Try again</button>
        </div>
      )}
    >
      <Page />
    </ErrorBoundary>
  )
}