QueryErrorBoundary
@suspensive/react-query๋ <QueryErrorResetBoundary/>
+ <ErrorBoundary/>
์ ๊ฐ์ ๋ฐ๋ณต๋๋ ๊ตฌํ์ ์ค์ด๊ธฐ ์ํด <QueryErrorBoundary/>
๋ฅผ ์ ๊ณตํฉ๋๋ค.
<ErrorBoundary/>
๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ฒ๋ผ <QueryErrorBoundary/>
๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. react-query์ ์บ์ฑ๋ error๋ฅผ resetํ๋ค๋ ์ ๋ง ๋นผ๋ฉด ๋ชจ๋ ๋ค๋ฅธ ๊ธฐ๋ฅ์ @suspensive/react์ <ErrorBoundary/>
์ ๊ฐ์ต๋๋ค.
import { QueryErrorBoundary } from '@suspensive/react-query'
const Example = () => (
<QueryErrorBoundary
fallback={(props) => (
<>
<button onClick={props.reset}>Try again</button>
{props.error.message}
</>
)}
>
<Page />
</QueryErrorBoundary>
)
peerDependency
<QueryErrorBoundary/>
๋ @suspensive/react์ <ErrorBoundary/>
์ peerDependency๋ฅผ ๊ฐ์ต๋๋ค.
๋ฐ๋ผ์ ์ด๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ๋จผ์ @suspensive/react๋ฅผ ์ค์นํด์ผ ํฉ๋๋ค.
npm install @suspensive/react @suspensive/react-query
๋๊ธฐ
<QueryErrorResetBoundary/>
๋ฅผ ์ฌ์ฉํ๋ฉด ์บ์ฑ๋ ์์์ query error๋ค์ resetํ ์ ์์ต๋๋ค. ํ์ง๋ง react-query์ suspense๋ฅผ ๊ณ์ ์ฌ์ฉํ๋ฉด, <QueryErrorResetBoundary/>
+ <ErrorBoundary/>
๋ฅผ ๊ณ์ ๋ฐ๋ณต์ ์ผ๋ก ์์ฑํด์ผ ํฉ๋๋ค.
<QueryErrorResetBoundary/>
+ <ErrorBoundary/>
import { ErrorBoundary } from '@suspensive/react'
import { QueryErrorResetBoundary } from '@tanstack/react-query'
const Example = () => (
<QueryErrorResetBoundary>
{({ reset }) => (
<ErrorBoundary
onReset={reset}
fallback={(props) => (
<>
<button onClick={props.reset}>Try again</button>
{props.error.message}
</>
)}
>
<Page />
</ErrorBoundary>
)}
</QueryErrorResetBoundary>
)