QueryErrorResetBoundary

function QueryErrorResetBoundary(__namedParameters): Element;

정의 위치: preact-query/src/QueryErrorResetBoundary.tsx:159

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

매개변수

__namedParameters

QueryErrorResetBoundaryProps

반환값

Element

그대로 렌더링되거나 boundary의 QueryErrorResetBoundaryValue와 함께 호출되는 children children이 함수인 경우입니다.

예시

import { useErrorBoundary } from 'preact/hooks'
import type { ComponentChildren } from 'preact'
import { QueryErrorResetBoundary } from '@tanstack/preact-query'

function ErrorBoundary({
  children,
  reset,
}: {
  children: ComponentChildren
  reset: () => void
}) {
  const [error, resetError] = useErrorBoundary(() => reset())

  if (error) {
    return (
      <div>
        There was an error!
        <button onClick={() => resetError()}>Try again</button>
      </div>
    )
  }

  return children
}

function App() {
  return (
    <QueryErrorResetBoundary>
      {({ reset }) => (
        <ErrorBoundary reset={reset}>
          <Page />
        </ErrorBoundary>
      )}
    </QueryErrorResetBoundary>
  )
}