react-query useQueryErrorResetBoundary 사용 예제

import { QueryClient, QueryClientProvider, useQuery, useQueryErrorResetBoundary } from 'react-query';
import { ErrorBoundary } from 'react-error-boundary';

const queryClient = new QueryClient();

function FetchData() {
  const { status, data, error } = useQuery('fetchData', async () => {
    // 임의의 API 요청
    const response = await fetch('https://yourapi.com/data');
    if (!response.ok) {
      throw new Error('Data fetch failed');
    }
    return response.json();
  });

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'error') {
    throw error;
  }

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <>
      <div>Fetching data failed: {error.message}</div>
      <button onClick={resetErrorBoundary}>Retry</button>
    </>
  );
}

export default function App() {
  const errorResetBoundary = useQueryErrorResetBoundary();

  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={errorResetBoundary.reset}>
        <div className="App">
          <FetchData />
        </div>
      </ErrorBoundary>
    </QueryClientProvider>
  );
}

useQueryErrorResetBoundary를 사용하여 ErrorBoundary와 함께 resetErrorBoundary 함수를 전달합니다. 이를 통해 전체 리액트 컴포넌트의 에러 경계를 설정하고, 에러 발생 시 사용자에게 메시지와 "Retry" 버튼을 보여줍니다. 사용자가 "Retry" 버튼을 클릭하면 에러 경계를 초기화하고 컴포넌트를 다시 마운트하여 API 요청을 재시도합니다.