๐Ÿ‘€ Suspensive v2์—์„œ์˜ ๋ณ€๊ฒฝ์„ ํ™•์ธํ•˜์„ธ์š”. ๋”๋ณด๊ธฐ โ†’
๋ฌธ์„œ๋ณด๊ธฐ@suspensive/react-query<QueryErrorBoundary/>

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>
)