QueryErrorResetBoundary

쿼리에서 suspense 또는 throwOnError를 사용할 때는 오류가 발생한 후 다시 렌더링할 때 재시도하기를 원한다는 것을 쿼리에 알릴 방법이 필요합니다. QueryErrorResetBoundary 컴포넌트를 사용하면 해당 컴포넌트의 경계 내에 있는 모든 쿼리 오류를 재설정할 수 있습니다.

import { QueryErrorResetBoundary } from '@tanstack/react-query'
import { ErrorBoundary } from 'react-error-boundary'

const App = () => (
  <QueryErrorResetBoundary>
    {({ reset }) => (
      <ErrorBoundary
        onReset={reset}
        fallbackRender={({ resetErrorBoundary }) => (
          <div>
            There was an error!
            <Button onClick={() => resetErrorBoundary()}>Try again</Button>
          </div>
        )}
      >
        <Page />
      </ErrorBoundary>
    )}
  </QueryErrorResetBoundary>
)