React Query (2) - useIsFetching / error처리

 

 

 

---

 

 

 

useIsFetching

 

 

In smaller apps

 - useQuery의 isFetching을 사용한다.

 

In a larger apps

 - 모든 query에서 isFetching 상태일 때 Loading spinner 등 을 사용하여 fetching중임을 나타낸다.

 - useIsFetching을 사용하면 각각의 useQuery call에 isFetching을 사용할 필요가 없다.

 

 

 

fetching중이 아니라면 0을 반환하고, fetching중이라면 진행중인 query의 number를 반환한다.

 

 

 

[Loading spinner 컴포넌트에서 useIsFetching 이용예시]

import { useIsFetching } from 'react-query';

export function Loading(): ReactElement {
  const isFetching = useIsFetching();

  const display = isFetching ? 'inherit' : 'none';

  return (
    <Spinner
      thickness="4px"
      speed="0.65s"
      emptyColor="olive.200"
      color="olive.800"
      role="status"
      position="fixed"
      zIndex="9999"
      top="50%"
      left="50%"
      transform="translate(-50%, -50%)"
      display={display}
    >
      <Text display="none">Loading...</Text>
    </Spinner>
  );
}

 

 

 

 

---

 

 

 

 

 

error 처리

 

React Query에서 에러를 핸들링 방법 3가지

1. useQuery로부터 반환한 error property
2. onError 콜백 (query에서 직접 선언하거나 global QueryCache / MutationCache)
3. Error bounderies 사용

 

 

- 개별 query마다 에러처리

  const { data = fallback } = useQuery(queryKey, queryFn, {
    onError: (error) => {
      const title = error instanceof Error ? error.message : '에러다';
      toast({ title, status: 'error' });
    },

 

 

- 전역 error handler : QueryClient의 option으로 추가

// queryClient.ts

function queryErrorHandler(error: unknown): void {
  const title =
    error instanceof Error ? error.message : 'error connecting to server';


export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: queryErrorHandler,
    },
  },
});

 

 

 

 

- Error boundary 사용시

 

🔽 Error Boundary란?

React v16에 도입된 에러를 핸들링할 수있는 React 합성 컴포넌트

Error Boundary는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하고, 에러가 발생한 컴포넌트 트리 대신 fallback UI를 보여준다.

<ErrorBoundary FallbackComponent={ErrorFallback}>
  <Login />
</ErrorBoundary>

Login 컴포넌트에서 에러 발생시 ErrorFallback 컴포넌트가 보여진다.
Error Boundary는 트리의 아래에 있는 컴포넌트의 오류만 포착한다.

 

 

defaultOptions의 useErrorBoundary를 true로 지정한 곳에서는 ErrorBoundary에서 지정한 FallbackComponent를 보여주게 된다.

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: queryErrorHandler,
      useErrorBoundary : true,
    },
  },
});