wrap

import { wrap, ErrorBoundaryGroup } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'
 
export const Page = wrap
  .ErrorBoundaryGroup({ blockOutside: true })
  .ErrorBoundary({ fallback: ({ error }) => <PageErrorFallback message={error.message} /> })
  .Suspense({ fallback: <PageSkeleton /> })
  .on(
    // will make <Page/> component wrapped in <ErrorBoundaryGroup/>, <ErrorBoundary/> and <Suspense/>
    () => {
      const { data: postList } = useSuspenseQuery({
        queryKey: ['posts'],
        queryFn: () => fetch(`https://example.com/posts`).then((res) => res.json()),
      })
 
      return (
        <>
          <ErrorBoundaryGroup.Consumer>
            {(group) => <button onClick={group.reset}>Reset all posts</button>}
          </ErrorBoundaryGroup.Consumer>
          {postList.map((post) => (
            <PostItem id={post.id} />
          ))}
        </>
      )
    }
  )
 
const PostItem =
  wrap.ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> }).Suspense({ fallback: <PostSkeleton /> }).on <
  { id: string } >
  // will make <Post/> component have PostProps wrapped in <ErrorBoundary/> and <Suspense/>
  ((props) => {
    const { data: post } = useSuspenseQuery({
      queryKey: ['posts', props.id],
      queryFn: () => fetch(`https://example.com/posts/${props.id}`).then((res) => res.json()),
    })
 
    return <>{post.title}</>
  })