import { Suspense, ErrorBoundary, ErrorBoundaryGroup, Delay } from '@suspensive/react'

const Example = () => (
  <ErrorBoundaryGroup>
    <ErrorBoundaryGroup.Consumer>
      {(group) => <button onClick={group.reset}>Reset All</button>}
    </ErrorBoundaryGroup.Consumer>
    <ErrorBoundary fallback={(props) => <button onClick={props.reset}>Reset error: {props.error.message}</button>}>
      <Suspense
        fallback={
          <Delay ms={200}>
            <Spinner />
          </Delay>
        }
      >
        <SuspenseMaker />
      </Suspense>
    </ErrorBoundary>
  </ErrorBoundaryGroup>
)

import { Suspense } from '@suspensive/react'
import { QueryErrorBoundary, useSuspenseQuery, SuspenseQuery, queryOptions } from '@suspensive/react-query'

const customQuery = () =>
  queryOptions({
    queryKey: ['queryKey'],
    queryFn: () => Promise.resolve({ text: 'Hello Suspensive' }),
  })

const SuspenseMaker = () => {
  const query = useSuspenseQuery(customQuery())
  return <>{query.data}</>
}

const Example = () => (
  <QueryErrorBoundary fallback={(props) => <button onClick={props.reset}>Reset error: {props.error.message}</button>}>
    <Suspense fallback={<Spinner />}>
      <SuspenseMaker />
    </Suspense>
    <Suspense fallback={<Spinner />}>
      <SuspenseQuery {...customQuery()} select={({ text }) => text}>
        {({ data: text }) => <>{text}</>}
      </SuspenseQuery>
    </Suspense>
  </QueryErrorBoundary>
)