snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

docs/framework/preact/guides/suspense.md

@@ -0,0 +1,87 @@
+---
+id: suspense
+title: Suspense
+ref: docs/framework/react/guides/suspense.md
+replace: { 'react-query': 'preact-query', 'React': 'Preact' }
+---
+
+[//]: # 'Info'
+
+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](#resetting-error-boundaries) section for more information on how to set up suspense mode.
+
+[//]: # 'Info'
+[//]: # 'PlaceholderData'
+
+`placeholderData` also doesn't exist for this Query.
+
+[//]: # 'PlaceholderData'
+[//]: # 'ExampleResetComponent'
+
+Preact does not ship an error boundary component, but one can be built with the [`useErrorBoundary`](https://preactjs.com/guide/v10/hooks/#useerrorboundary) hook:
+
+```tsx
+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>
+)
+```
+
+[//]: # 'ExampleResetComponent'
+[//]: # 'ExampleResetHook'
+
+```tsx
+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>
+  )
+}
+```
+
+[//]: # 'ExampleResetHook'
+[//]: # 'Streaming'
+[//]: # 'Streaming'