docs(preact-query/reference): replace 'react-error-boundary' example with 'useErrorBoundary'

Author: sukvvon

docs/framework/preact/reference/QueryErrorResetBoundary.md

@@ -4,3 +4,47 @@ title: QueryErrorResetBoundary
 ref: docs/framework/react/reference/QueryErrorResetBoundary.md
 replace: { '@tanstack/react-query': '@tanstack/preact-query' }
 ---
+
+[//]: # 'ReactErrorBoundaryExample'
+
+Preact provides a [`useErrorBoundary` hook](https://preactjs.com/guide/v10/hooks/#useerrorboundary) that you can combine with `QueryErrorResetBoundary`'s `reset`:
+
+```tsx
+import { QueryErrorResetBoundary } from '@tanstack/preact-query'
+import type { ComponentChildren } from 'preact'
+import { useErrorBoundary } from 'preact/hooks'
+
+function ErrorBoundary(props: { onReset: () => void; children: ComponentChildren }) {
+  const [error, resetError] = useErrorBoundary()
+
+  if (error) {
+    return (
+      <div>
+        There was an error!
+        <Button
+          onClick={() => {
+            props.onReset()
+            resetError()
+          }}
+        >
+          Try again
+        </Button>
+      </div>
+    )
+  }
+
+  return props.children
+}
+
+const App = () => (
+  <QueryErrorResetBoundary>
+    {({ reset }) => (
+      <ErrorBoundary onReset={reset}>
+        <Page />
+      </ErrorBoundary>
+    )}
+  </QueryErrorResetBoundary>
+)
+```
+
+[//]: # 'ReactErrorBoundaryExample'

docs/framework/preact/reference/useQueryErrorResetBoundary.md

@@ -4,3 +4,37 @@ title: useQueryErrorResetBoundary
 ref: docs/framework/react/reference/useQueryErrorResetBoundary.md
 replace: { '@tanstack/react-query': '@tanstack/preact-query' }
 ---
+
+[//]: # 'ReactErrorBoundaryExample'
+
+Preact provides a [`useErrorBoundary` hook](https://preactjs.com/guide/v10/hooks/#useerrorboundary) that you can combine with `useQueryErrorResetBoundary`'s `reset`:
+
+```tsx
+import { useQueryErrorResetBoundary } from '@tanstack/preact-query'
+import { useErrorBoundary } from 'preact/hooks'
+
+const App = () => {
+  const { reset } = useQueryErrorResetBoundary()
+  const [error, resetError] = useErrorBoundary()
+
+  if (error) {
+    return (
+      <div>
+        There was an error!
+        <Button
+          onClick={() => {
+            reset()
+            resetError()
+          }}
+        >
+          Try again
+        </Button>
+      </div>
+    )
+  }
+
+  return <Page />
+}
+```
+
+[//]: # 'ReactErrorBoundaryExample'

docs/framework/react/reference/QueryErrorResetBoundary.md

@@ -5,6 +5,8 @@ title: QueryErrorResetBoundary
 
 When using **suspense** or **throwOnError** in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can reset any query errors within the boundaries of the component.
 
+[//]: # 'ReactErrorBoundaryExample'
+
 ```tsx
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
 import { ErrorBoundary } from 'react-error-boundary'
@@ -27,3 +29,5 @@ const App = () => (
   </QueryErrorResetBoundary>
 )
 ```
+
+[//]: # 'ReactErrorBoundaryExample'

docs/framework/react/reference/useQueryErrorResetBoundary.md

@@ -5,6 +5,8 @@ title: useQueryErrorResetBoundary
 
 This hook will reset any query errors within the closest `QueryErrorResetBoundary`. If there is no boundary defined it will reset them globally:
 
+[//]: # 'ReactErrorBoundaryExample'
+
 ```tsx
 import { useQueryErrorResetBoundary } from '@tanstack/react-query'
 import { ErrorBoundary } from 'react-error-boundary'
@@ -26,3 +28,5 @@ const App = () => {
   )
 }
 ```
+
+[//]: # 'ReactErrorBoundaryExample'