(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4958],{4974:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/en/docs/react-query/SuspenseQuery",function(){return n(4359)}])},4359:function(s,e,n){"use strict";n.r(e),n.d(e,{useTOC:function(){return a}});var l=n(1549),r=n(9715),o=n(2517),c=n(2153),t=n(5290),i=n(9247);function a(s){return[{value:"Motivation: useSuspenseQuery is not obvious",id:"motivation-usesuspensequery-is-not-obvious",depth:2}]}e.default=(0,r.c)(function(s){let{toc:e=a(s)}=s,n={code:"code",h1:"h1",h2:"h2",li:"li",mark:"mark",ol:"ol",p:"p",pre:"pre",span:"span",...(0,c.a)(),...s.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h1,{children:"SuspenseQuery"}),"\n",(0,l.jsx)(n.p,{children:"We provide these components to clearly express what causes suspense at the same depth."}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsx)(n.li,{children:"Prop-drilling resulting from removing depth such as UserInfo and PostList for data-fetching only is also removed."}),"\n",(0,l.jsx)(n.li,{children:"Changing the range of Suspense and ErrorBoundary becomes simple. Parallel processing of queries is also easier."}),"\n",(0,l.jsx)(n.li,{children:"Because it manages all data-fetching within the Page component, the internal components are presentational, so it is easy to separate the components."}),"\n"]}),"\n",(0,l.jsx)(n.pre,{icon:i.Dr,tabIndex:"0","data-language":"jsx","data-word-wrap":"","data-copy":"",children:(0,l.jsxs)(n.code,{children:[(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { "}),(0,l.jsx)(n.mark,{"data-highlighted-chars":"",children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"SuspenseQuery"})}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '@suspensive/react-query'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { Suspense, ErrorBoundary } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '@suspensive/react'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { PostListItem, UserProfile } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '~/components'"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" PostsPage"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"ErrorBoundary"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" fallback"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"error"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" <>"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"error.message"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"</>"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"Suspense"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" fallback"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"'loading...'"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.mark,{"data-highlighted-chars":"",children:(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"SuspenseQuery"})}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"userQueryOptions"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(userId)"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"        {"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"user"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"UserProfile"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"user.id"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"user"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" />"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      </"}),(0,l.jsx)(n.mark,{"data-highlighted-chars":"",children:(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"SuspenseQuery"})}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.mark,{"data-highlighted-chars":"",children:(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"SuspenseQuery"})})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"        {..."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"postsQueryOptions"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(userId)"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"        select"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"posts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" posts."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"filter"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"isPublic"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" isPublic)"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      >"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"        {"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"posts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"          posts."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"post"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"PostListItem"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"post.id"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"post"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" />)"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"        }"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      </"}),(0,l.jsx)(n.mark,{"data-highlighted-chars":"",children:(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"SuspenseQuery"})}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"Suspense"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"ErrorBoundary"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"})})]})}),"\n",(0,l.jsxs)(t.xR,{files:{"Example.tsx":{code:"import { useState } from 'react'\nimport { ErrorBoundary, Suspense } from '@suspensive/react'\nimport { SuspenseQuery } from '@suspensive/react-query'\nimport { PostListItem } from './PostListItem'\nimport { UserProfile } from './UserProfile'\nimport { postsQueryOptions, userQueryOptions } from './queries'\n\nexport const Example = () => {\n  const [userId, setUserId] = useState(1)\n  const [showAllPosts, setShowAllPosts] = useState(false)\n\n  return (\n    <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>\n      <button onClick={() => setUserId((id) => id - 1)} disabled={userId === 1}>\n        Previous User\n      </button>\n      <button\n        onClick={() => setUserId((id) => id + 1)}\n        disabled={userId === 10}\n      >\n        Next User\n      </button>\n      <Suspense fallback={<div>Loading...</div>}>\n        <SuspenseQuery {...userQueryOptions(userId)}>\n          {({ data: user }) => <UserProfile key={user.id} {...user} />}\n        </SuspenseQuery>\n\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={showAllPosts}\n            onChange={() => setShowAllPosts((showAllPosts) => !showAllPosts)}\n          />\n          Show All Posts\n        </label>\n\n        <SuspenseQuery\n          {...postsQueryOptions(userId)}\n          select={(posts) =>\n            posts.filter(({ isPublic }) => showAllPosts || isPublic)\n          }\n        >\n          {({ data: posts }) => (\n            <ol>\n              {posts.map((post) => (\n                <PostListItem key={post.id} {...post} />\n              ))}\n            </ol>\n          )}\n        </SuspenseQuery>\n      </Suspense>\n    </ErrorBoundary>\n  )\n}",active:!0,hidden:void 0,readOnly:void 0},"PostListItem.tsx":{code:"import type { Post } from './api'\n\nexport const PostListItem = (props: Post) => {\n  return (\n    <li style={{ marginBottom: '10px' }}>\n      <span style={{ color: props.isPublic ? 'green' : 'red' }}>\n        {props.isPublic ? 'Public' : 'Private'} Post{' '}\n      </span>\n      {props.title}\n    </li>\n  )\n}",active:void 0,hidden:void 0,readOnly:void 0},"UserProfile.tsx":{code:"import type { User } from './api'\n\nexport const UserProfile = (props: User) => {\n  return (\n    <div style={{ padding: '16px' }}>\n      <h1>{props.name}</h1>\n      <p>{props.email}</p>\n      <p>{props.phone}</p>\n    </div>\n  )\n}",active:void 0,hidden:void 0,readOnly:void 0},"queries.ts":{code:"import { queryOptions } from '@suspensive/react-query'\nimport { getPosts, getUser } from './api'\n\nexport const userQueryOptions = (userId: number) =>\n  queryOptions({\n    queryKey: ['users', userId],\n    queryFn: () => getUser(userId),\n  })\n\nexport const postsQueryOptions = (userId: number) =>\n  queryOptions({\n    queryKey: ['users', userId, 'posts'],\n    queryFn: () => getPosts(userId),\n  })",active:void 0,hidden:void 0,readOnly:void 0},"api.ts":{code:"export type Post = {\n  userId: number\n  id: number\n  title: string\n  body: string\n  isPublic: boolean\n}\n\nexport const getPosts = async (userId: number): Promise<Post[]> => {\n  const response = await fetch(\n    `https://jsonplaceholder.typicode.com/posts?userId=${userId}`\n  )\n\n  if (!response.ok) {\n    throw new Error('An error occurred')\n  }\n\n  const data = await response.json()\n\n  return data.map((post, index) => ({\n    ...post,\n    isPublic: index % 2 === 1,\n  }))\n}\n\nexport type User = {\n  id: number\n  name: string\n  username: string\n  email: string\n  address: {\n    street: string\n    suite: string\n    city: string\n    zipcode: string\n    geo: {\n      lat: string\n      lng: string\n    }\n    phone: string\n    website: string\n    company: {\n      name: string\n      catchPhrase: string\n      bs: string\n    }\n  }\n}\n\nexport const getUser = async (id: number): Promise<User> => {\n  const response = await fetch(\n    `https://jsonplaceholder.typicode.com/users/${id}`\n  )\n\n  if (!response.ok) {\n    throw new Error('An error occurred')\n  }\n\n  const data = await response.json()\n\n  return data\n}",active:void 0,hidden:void 0,readOnly:void 0}},children:[(0,l.jsx)(n.pre,{icon:i.KP,tabIndex:"0","data-language":"tsx","data-word-wrap":"","data-copy":"",children:(0,l.jsxs)(n.code,{children:[(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { useState } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" 'react'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { ErrorBoundary, Suspense } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '@suspensive/react'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { SuspenseQuery } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '@suspensive/react-query'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { PostListItem } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" './PostListItem'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { UserProfile } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" './UserProfile'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { postsQueryOptions, userQueryOptions } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" './queries'"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" Example"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  const"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"setUserId"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  const"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"showAllPosts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"setShowAllPosts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  return"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"ErrorBoundary"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" fallback"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"error"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" <>"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"error.message"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"</>"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"button"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" setUserId"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"id"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" id "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" disabled"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"userId "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"        Previous User"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"button"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"button"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"        onClick"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" setUserId"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"id"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" id "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"        disabled"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"userId "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" 10"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      >"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"        Next User"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"button"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"Suspense"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" fallback"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">Loading...</"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"        <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"SuspenseQuery"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"userQueryOptions"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(userId)"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"          {"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"user"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"UserProfile"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"user.id"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"user"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" />"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"        </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"SuspenseQuery"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"        <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"label"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"          <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"input"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"            type"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:'"checkbox"'})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"            checked"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"showAllPosts"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"            onChange"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" setShowAllPosts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"showAllPosts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" !"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"showAllPosts)"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"          />"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"          Show All Posts"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"        </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"label"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"        <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"SuspenseQuery"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"          {..."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"postsQueryOptions"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(userId)"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"          select"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"posts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"            posts."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"filter"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"isPublic"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" showAllPosts "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"||"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" isPublic)"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"          }"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"        >"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"          {"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"posts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"            <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"ol"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"              {"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"posts."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"post"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"                <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"PostListItem"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"post.id"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"post"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" />"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"              ))"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"            </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"ol"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"          )"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"        </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"SuspenseQuery"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"Suspense"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"ErrorBoundary"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  )"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"}"})})]})}),(0,l.jsx)(n.pre,{icon:i.KP,tabIndex:"0","data-language":"tsx","data-word-wrap":"","data-copy":"",children:(0,l.jsxs)(n.code,{children:[(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { Post } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" './api'"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" PostListItem"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:" Post"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  return"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"li"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"{ marginBottom: "}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"'10px'"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"{ color: props.isPublic "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" 'green'"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" 'red'"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"        {"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"props.isPublic "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" 'Public'"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" 'Private'"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" Post"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"' '"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"      {"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"props.title"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"li"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  )"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"}"})})]})}),(0,l.jsx)(n.pre,{icon:i.KP,tabIndex:"0","data-language":"tsx","data-word-wrap":"","data-copy":"",children:(0,l.jsxs)(n.code,{children:[(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { User } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" './api'"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" UserProfile"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:" User"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  return"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"{ padding: "}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"'16px'"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"h1"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"props.name"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"</"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"h1"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"props.email"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"</"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"props.phone"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"</"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  )"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"}"})})]})}),(0,l.jsx)(n.pre,{icon:i.KP,tabIndex:"0","data-language":"tsx","data-word-wrap":"","data-copy":"",children:(0,l.jsxs)(n.code,{children:[(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { queryOptions } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '@suspensive/react-query'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { getPosts, getUser } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" './api'"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" userQueryOptions"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"  queryOptions"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    queryKey: ["}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"'users'"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:", userId],"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"    queryFn"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:": () "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" getUser"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(userId),"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  })"})}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" postsQueryOptions"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"  queryOptions"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    queryKey: ["}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"'users'"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:", userId, "}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"'posts'"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"],"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"    queryFn"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:": () "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" getPosts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(userId),"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  })"})})]})}),(0,l.jsx)(n.pre,{icon:i.KP,tabIndex:"0","data-language":"tsx","data-word-wrap":"","data-copy":"",children:(0,l.jsxs)(n.code,{children:[(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:" Post"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  userId"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" number"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  id"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" number"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  title"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  body"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  isPublic"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" boolean"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"}"})}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" getPosts"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" async"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:" Promise"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"Post"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"[]> "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  const"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" response"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" fetch"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"    `https://jsonplaceholder.typicode.com/posts?userId=${"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"}`"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  )"})}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  if"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"!"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"response.ok) {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"    throw"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" Error"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"'An error occurred'"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  }"})}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  const"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" data"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" response."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"json"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"()"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  return"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" data."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"post"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ({"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"    ..."}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"post,"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    isPublic: index "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"%"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" 2"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ==="}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:","})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  }))"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"}"})}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:" User"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  id"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" number"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  name"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  username"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  email"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"  address"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"    street"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"    suite"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"    city"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"    zipcode"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"    geo"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"      lat"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"      lng"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    }"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"    phone"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"    website"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"    company"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"      name"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"      catchPhrase"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"      bs"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" string"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    }"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  }"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"}"})}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" getUser"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" async"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"id"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:" Promise"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"User"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"> "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  const"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" response"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" fetch"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"    `https://jsonplaceholder.typicode.com/users/${"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"id"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"}`"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  )"})}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  if"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"!"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"response.ok) {"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"    throw"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" Error"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"'An error occurred'"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  }"})}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  const"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" data"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" response."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"json"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"()"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  return"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" data"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"}"})})]})})]}),"\n",(0,l.jsx)(n.h2,{id:e[0].id,children:e[0].value}),"\n",(0,l.jsx)(n.p,{children:"Because the existing useSuspenseQuery is a hook, it creates components with names such as UserInfo and PostList to place Suspense and ErrorBoundary on the parent.\nThis makes it difficult to predict what suspense and errors will be thrown inside UserInfo and PostList."}),"\n",(0,l.jsx)(n.pre,{icon:i.Dr,tabIndex:"0","data-language":"jsx","data-word-wrap":"","data-copy":"",children:(0,l.jsxs)(n.code,{children:[(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#8B949E"},children:"// posts/page.tsx"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { Suspense, ErrorBoundary } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '@suspensive/react'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { UserInfo } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" './components/UserInfo'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { PostList } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" './components/PostList'"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" PostsPage"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"ErrorBoundary"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" fallback"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"error"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" <>"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"error.message"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"</>"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"Suspense"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" fallback"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"'loading...'"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"UserInfo"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" userId"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" />"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"' '"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"      {"}),(0,l.jsx)(n.span,{style:{color:"#8B949E"},children:"/* It is difficult to predict whether a suspension will occur internally. */"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"      <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"PostList"}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:" userId"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" />"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:"' '"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"      {"}),(0,l.jsx)(n.span,{style:{color:"#8B949E"},children:"/* It is difficult to predict whether a suspension will occur internally. */"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"    </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"Suspense"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"  </"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"ErrorBoundary"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:">"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:")"})})]})}),"\n",(0,l.jsx)(n.pre,{icon:i.Dr,tabIndex:"0","data-language":"jsx","data-word-wrap":"","data-copy":"",children:(0,l.jsxs)(n.code,{children:[(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#8B949E"},children:"// posts/components/UserInfo.tsx"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { "}),(0,l.jsx)(n.mark,{"data-highlighted-chars":"",children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"useSuspenseQuery"})}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '@suspensive/react-query'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { UserProfile } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '~/components'"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#8B949E"},children:"// From the perspective of using this component, it is impossible to predict whether Suspense will occur internally just by the name UserInfo."})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" UserInfo"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#8B949E"},children:"  // We need to create this component just for data-fetching."})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  const"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"user"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" "}),(0,l.jsx)(n.mark,{"data-highlighted-chars":"",children:(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"useSuspenseQuery"})}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"userQueryOptions"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(userId))"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"  return"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"UserProfile"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"user"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" />"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"}"})})]})}),"\n",(0,l.jsx)(n.pre,{icon:i.Dr,tabIndex:"0","data-language":"jsx","data-word-wrap":"","data-copy":"",children:(0,l.jsxs)(n.code,{children:[(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#8B949E"},children:"// posts/components/PostList.tsx"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { "}),(0,l.jsx)(n.mark,{"data-highlighted-chars":"",children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"useSuspenseQuery"})}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '@suspensive/react-query'"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { PostListItem } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#A5D6FF"},children:" '~/components'"})]}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#8B949E"},children:"// From the perspective of using this component, it is impossible to predict whether a suspense will occur internally based on the name PostList alone."})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" PostList"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"userId"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" {"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#8B949E"},children:"   // We need to create this component just for data-fetching."})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"   const"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#79C0FF"},children:"posts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:" "}),(0,l.jsx)(n.mark,{"data-highlighted-chars":"",children:(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"useSuspenseQuery"})}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"({"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"     ..."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"postsQueryOptions"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(userId);"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"     select: ("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"posts"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" posts."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"filter"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"isPublic"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" isPublic),"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"   })"})}),"\n",(0,l.jsx)(n.span,{children:" "}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"   return"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"     <>"})}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"       {"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"posts."}),(0,l.jsx)(n.span,{style:{color:"#D2A8FF"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFA657"},children:"post"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" ("})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"         <"}),(0,l.jsx)(n.span,{style:{color:"#7EE787"},children:"PostListItem"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"post"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:" />"})]}),"\n",(0,l.jsxs)(n.span,{children:[(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"       ))"}),(0,l.jsx)(n.span,{style:{color:"#FF7B72"},children:"}"})]}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"     </>"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"   )"})}),"\n",(0,l.jsx)(n.span,{children:(0,l.jsx)(n.span,{style:{color:"#E6EDF3"},children:"}"})})]})})]})},"/en/docs/react-query/SuspenseQuery",{filePath:"src/pages/en/docs/react-query/SuspenseQuery.mdx",timestamp:1729059357e3,readingTime:{text:"5 min read",minutes:4.075,time:244500,words:815},pageMap:o.v,frontMatter:{},title:"SuspenseQuery"},"undefined"==typeof RemoteContent?a:RemoteContent.useTOC)},2517:function(s,e,n){"use strict";n.d(e,{v:function(){return l}});let l=[{data:{index:{type:"page",display:"hidden",theme:{layout:"full"}},docs:{type:"page",title:"Documentation"},visualization:{type:"page",title:"Visualization",href:"https://visualization.suspensive.org",newWindow:!0},versions:{type:"menu",title:"latest",items:{latest:{title:"latest",href:"https://suspensive.org"},v2:{title:"v2",href:"https://v2.suspensive.org"},v1:{title:"v1",href:"https://v1.suspensive.org"}}}}},{name:"docs",route:"/en/docs",children:[{data:{"--- Packages":{type:"separator",title:"Packages"},react:{title:"@suspensive/react"},"react-query":{title:"@suspensive/react-query"},jotai:{title:"@suspensive/jotai"},"--- More":{type:"separator",title:"More"},"migrate-to-v2":{title:"Migrating to v2"},changelogs:{title:"Changelogs"},contributors:{title:"Contributors"},links:{title:"Related Links"}}},{name:"changelogs",route:"/en/docs/changelogs",frontMatter:{sidebarTitle:"Changelogs"}},{name:"contributors",route:"/en/docs/contributors",frontMatter:{sidebarTitle:"Contributors"}},{name:"jotai",route:"/en/docs/jotai",children:[{data:{motivation:{title:"Why need to use?"},installation:{title:"Installation"},"--- API Reference":{type:"separator",title:"API Reference"},Atom:{title:"<Atom/>"},AtomValue:{title:"<AtomValue/>"},SetAtom:{title:"<SetAtom/>"}}},{name:"Atom",route:"/en/docs/jotai/Atom",frontMatter:{sidebarTitle:"Atom"}},{name:"AtomValue",route:"/en/docs/jotai/AtomValue",frontMatter:{sidebarTitle:"Atomvalue"}},{name:"installation",route:"/en/docs/jotai/installation",frontMatter:{sidebarTitle:"Installation"}},{name:"motivation",route:"/en/docs/jotai/motivation",frontMatter:{sidebarTitle:"Motivation"}},{name:"SetAtom",route:"/en/docs/jotai/SetAtom",frontMatter:{sidebarTitle:"Setatom"}}]},{name:"links",route:"/en/docs/links",frontMatter:{sidebarTitle:"Links"}},{name:"migrate-to-v2",route:"/en/docs/migrate-to-v2",frontMatter:{sidebarTitle:"Migrate to V2"}},{name:"react",route:"/en/docs/react",children:[{data:{motivation:{title:"Why need to use?"},installation:{title:"Installation"},"migrate-to-v2":{title:"Migrating to v2"},"--- API Reference":{type:"separator",title:"API Reference"},Suspense:{title:"<Suspense/>"},ErrorBoundary:{title:"<ErrorBoundary/>"},ErrorBoundaryGroup:{title:"<ErrorBoundaryGroup/>"},Delay:{title:"<Delay/>"},ClientOnly:{title:"<ClientOnly/>"},DefaultPropsProvider:{title:"<DefaultPropsProvider/>"},wrap:{title:"wrap"}}},{name:"ClientOnly",route:"/en/docs/react/ClientOnly",frontMatter:{sidebarTitle:"Clientonly"}},{name:"DefaultPropsProvider",route:"/en/docs/react/DefaultPropsProvider",frontMatter:{sidebarTitle:"Defaultpropsprovider"}},{name:"Delay",route:"/en/docs/react/Delay",frontMatter:{sidebarTitle:"Delay"}},{name:"ErrorBoundary",route:"/en/docs/react/ErrorBoundary",frontMatter:{sidebarTitle:"Errorboundary"}},{name:"ErrorBoundaryGroup",route:"/en/docs/react/ErrorBoundaryGroup",frontMatter:{sidebarTitle:"Errorboundarygroup"}},{name:"installation",route:"/en/docs/react/installation",frontMatter:{sidebarTitle:"Installation"}},{name:"migrate-to-v2",route:"/en/docs/react/migrate-to-v2",frontMatter:{sidebarTitle:"Migrate to V2"}},{name:"motivation",route:"/en/docs/react/motivation",frontMatter:{sidebarTitle:"Motivation"}},{name:"Suspense",route:"/en/docs/react/Suspense",frontMatter:{sidebarTitle:"Suspense"}},{name:"wrap",route:"/en/docs/react/wrap",frontMatter:{sidebarTitle:"Wrap"}}]},{name:"react-query",route:"/en/docs/react-query",children:[{data:{motivation:{title:"Why need to use?"},installation:{title:"Installation"},"tanstack-query-compatibility":{title:"Support both TanStack Query v4 and 5"},"migrate-to-v2":{title:"Migrating to v2"},"--- API Reference":{type:"separator",title:"API Reference"},queryOptions:{title:"queryOptions"},infiniteQueryOptions:{title:"infiniteQueryOptions"},useSuspenseQuery:{title:"useSuspenseQuery"},useSuspenseQueries:{title:"useSuspenseQueries"},useSuspenseInfiniteQuery:{title:"useSuspenseInfiniteQuery"},usePrefetchQuery:{title:"usePrefetchQuery"},usePrefetchInfiniteQuery:{title:"usePrefetchInfiniteQuery"},SuspenseQuery:{title:"<SuspenseQuery/>"},SuspenseQueries:{title:"<SuspenseQueries/>"},SuspenseInfiniteQuery:{title:"<SuspenseInfiniteQuery/>"},Mutation:{title:"<Mutation/>"},PrefetchQuery:{title:"<PrefetchQuery/>"},PrefetchInfiniteQuery:{title:"<PrefetchInfiniteQuery/>"},QueryClientConsumer:{title:"<QueryClientConsumer/>"},QueryErrorBoundary:{title:"<QueryErrorBoundary/>"}}},{name:"infiniteQueryOptions",route:"/en/docs/react-query/infiniteQueryOptions",frontMatter:{sidebarTitle:"Infinitequeryoptions"}},{name:"installation",route:"/en/docs/react-query/installation",frontMatter:{sidebarTitle:"Installation"}},{name:"migrate-to-v2",route:"/en/docs/react-query/migrate-to-v2",frontMatter:{sidebarTitle:"Migrate to V2"}},{name:"motivation",route:"/en/docs/react-query/motivation",frontMatter:{sidebarTitle:"Motivation"}},{name:"Mutation",route:"/en/docs/react-query/Mutation",frontMatter:{sidebarTitle:"Mutation"}},{name:"PrefetchInfiniteQuery",route:"/en/docs/react-query/PrefetchInfiniteQuery",frontMatter:{sidebarTitle:"Prefetchinfinitequery"}},{name:"PrefetchQuery",route:"/en/docs/react-query/PrefetchQuery",frontMatter:{sidebarTitle:"Prefetchquery"}},{name:"QueryClientConsumer",route:"/en/docs/react-query/QueryClientConsumer",frontMatter:{sidebarTitle:"Queryclientconsumer"}},{name:"QueryErrorBoundary",route:"/en/docs/react-query/QueryErrorBoundary",frontMatter:{sidebarTitle:"Queryerrorboundary"}},{name:"queryOptions",route:"/en/docs/react-query/queryOptions",frontMatter:{sidebarTitle:"Queryoptions"}},{name:"SuspenseInfiniteQuery",route:"/en/docs/react-query/SuspenseInfiniteQuery",frontMatter:{sidebarTitle:"Suspenseinfinitequery"}},{name:"SuspenseQueries",route:"/en/docs/react-query/SuspenseQueries",frontMatter:{sidebarTitle:"Suspensequeries"}},{name:"SuspenseQuery",route:"/en/docs/react-query/SuspenseQuery",frontMatter:{sidebarTitle:"Suspensequery"}},{name:"tanstack-query-compatibility",route:"/en/docs/react-query/tanstack-query-compatibility",frontMatter:{sidebarTitle:"Tanstack Query Compatibility"}},{name:"usePrefetchInfiniteQuery",route:"/en/docs/react-query/usePrefetchInfiniteQuery",frontMatter:{sidebarTitle:"Useprefetchinfinitequery"}},{name:"usePrefetchQuery",route:"/en/docs/react-query/usePrefetchQuery",frontMatter:{sidebarTitle:"Useprefetchquery"}},{name:"useSuspenseInfiniteQuery",route:"/en/docs/react-query/useSuspenseInfiniteQuery",frontMatter:{sidebarTitle:"Usesuspenseinfinitequery"}},{name:"useSuspenseQueries",route:"/en/docs/react-query/useSuspenseQueries",frontMatter:{sidebarTitle:"Usesuspensequeries"}},{name:"useSuspenseQuery",route:"/en/docs/react-query/useSuspenseQuery",frontMatter:{sidebarTitle:"Usesuspensequery"}}]}]},{name:"index",route:"/en",frontMatter:{sidebarTitle:"Index"}}]}},function(s){s.O(0,[8136,5359,6754,5290,2888,9774,179],function(){return s(s.s=4974)}),_N_E=s.O()}]);