Await
โ ๏ธ
<Await/>
๋ ์คํ ๊ธฐ๋ฅ์ด๋ฏ๋ก ์ด ์ธํฐํ์ด์ค๋ ๋ณ๊ฒฝ๋ ์ ์์ต๋๋ค.
์ด ์ปดํฌ๋ํธ๋ ๋ฐ์ ๋น๋๊ธฐ ํจ์๊ฐ ๋ฆฌํดํ Promise๊ฐ pending์ด๋ฉด ๊ฐ์ฅ ๊ฐ๊น์ด ๋ถ๋ชจ Suspense์ fallback์ ๋ ธ์ถํฉ๋๋ค. ์ดํ Promise๊ฐ fulfilled๋๋ฉด children ์ปดํฌ๋ํธ๋ค์์ ๋ณด์ฅ๋ awaited data๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํฉ๋๋ค.
๋ํ ์ด data๋ ๋ฐ์ ํค์ cache๋์ด ์ฌ์ฌ์ฉํ๋ ๊ฒฝ์ฐ pending์์ด ์ฆ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
import { Await } from '@suspensive/react-await'
import { Suspense } from '@suspensive/react'
const getPost = (postId: number) => fetch(`/post/${postId}`).then<Post>((res) => res.json())
const Example = () => (
<Suspense fallback="awaiting...">
<Await options={{ key: ['post', 2] as const, fn: ({ key: [, postId] }) => getPost(postId) }}>
{(awaited) => <>{awiated.data}</>} // Post
</Await>
</Suspense>
)