리액트 쿼리 에러 핸들링 이슈
react query를 활용한 에러 핸들링이 안돼서 질문 올립니다...
//mainpage.tsx
const { data, refetch, isFetching } = FetchData(url);
const handleSearch = () => {
refetch();
}
<QueryErrorResetBoundary>
{({ reset }) => (
<ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}>
{resultVisible ? (
<Result searchData={searchData} isFetching={isFetching} />
) : (
<EmptyResult />
)}
</ErrorBoundary>
)}
</QueryErrorResetBoundary>
react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면
FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다.
//FallbackUI 컴포넌트
//에러가 발생히면 이 컴포넌트가 렌더링되어야합니다.
const FallbackUI = ({ error, resetErrorBoundary }) => {
return (
<div>
<span>{error.message}...</span>
<button onclick={resetErrorBoundary} />
돌아가기 버튼
</div>
);
};
export default FallbackUI;
FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다.
//url을 파라미터값으로 받아와 api호출하는 함수
//위에 있는 mainpage.tsx 에서 사용하는 함수입니다.
const FetchData = (url: string) => {
const { error, data, refetch, isFetching } = useQuery({
queryKey: ["repoData"],
queryFn: async () => {
const res = await axios.get(url);
console.log(res.data);
return res.data;
},
refetchOnWindowFocus: false,
enabled: false,
});
return { error, data, refetch, isFetching };
};
리액트 쿼리를 이용해 api를 호출하는 함수입니다.
//main.tsx
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: 0,
throwOnError: true,
},
},
});
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<GlobalStyles />
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
</QueryClientProvider>
</React.StrictMode>
);
마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다.
그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다.
이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ
혹시 몰라서 콘솔 에러코드도 올립니다..
추가로 궁금한 점
1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다.
2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다.
답변주시면 정말 감사하겠습니다!!!
#react
#react-query
#error-handler
#error-boundary