프로젝트를 위한 React-Query 세팅(queryClient와 에러 중앙화, 로딩 중앙화, 커스텀 훅)

queryClient와 에러 중앙화

기존에는 queryClient를 QueryClientProvider과 같은 파일 내에 선언해 줬다. 

하지만 좀 더 큰 규모의 프로젝트에서는 위 사진처럼 queryClient.ts로 따로 빼서 선언해줬다. 이렇게 하면 에러 처리를 중앙화해줄 수 있다.

 

-queryClient.ts

// 에러처리 중앙화
function queryErrorHandler(error: unknown): void {
  // error is type unknown because in js, anything can be an error (e.g. throw(5))
  // error이 Error 클래스의 인스턴스인지에 따라 비슷한 방식으로 이름을 정하도록 했다.
  const title =
    error instanceof Error ? error.message : 'error connecting to server';

  // prevent duplicate toasts
  toast.closeAll();
  toast({ title, status: 'error', variant: 'subtle', isClosable: true });
}

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

onError 헨들러 쿼리 함수가 에러를 발생하면 onError 콜백이 실행된다. 이때 React Query가 콜백에 에러 매개변수를 전달하여 다양한 방식으로 에러 처리가 가능하다. 이것을 중앙화하면 isError와 error에 의존하지 않아도 된다. 따라서 onError를 QueryClient의 기본값으로 만들었고 모든 useQuery 호출 시 해당 onError 콜백을 사용하게 될 것이다.

로딩 인디케이터 중앙화

export function Loading(): ReactElement {
  // useIsFetching은 현재 가져오고 있는 쿼리 호출의 정수 값을 리턴한다.
  const isFetching = useIsFetching(); // for now, just don't display

  // isFetching이 0보다 크면 로딩 스피너가 나타나게 한다.
  const display = isFetching ? 'inherit' : 'none';

  return (
  // ...
  );
}

 

로딩 인디케이터 중앙화를 위해 useIsFetching을 사용할 수 있다. 기존에 사용하던 것은 각각 컴포넌트에서 isLoading을 사용했다. isLoading은 isFetching에서 캐시 된 데이터가 없는 것이다. 즉, isFetching이 더 크고 isLoading은 가져오기를 하면서 해당 쿼리에 대한 캐시 된 데이터가 없는 경우이다.

useIsFetching은 현재 가져오고 있는 쿼리가 있는지를 알려주는 hook이다. 즉, 각각의 커스텀 훅에 isFetching을 할 필요가 없다. 위 코드에서 isFetching은 useIsFetching()의 결과값을 받으므로 isFetching이 0이 아니면 로딩 스피너가 나타나게 하면 된다.

커스텀 훅

리액트 쿼리에서는 데이터를 읽어오기 위한 hook을 만드는 것이 흔한 일이다.

 

-장점

1. 여러 컴포넌트에서 같은 데이터가 필요한 경우

2. 여러 useQuery를 호출했으면 key를 헷갈릴 수 있다.

3. 쿼리 함수를 헷갈릴 일이 없다.

4. 데이터를 가져오는 과정이 수정되면 컴포넌트를 안건들고 hook만 건들면 된다.

export function useTreatments(): Treatment[] {
  // fallback을 기본 값으로 둬야 처음에 잠깐 빈 값이 나왔다가 데이터가 다 불러와지면 보여준다.
  const fallback = [];

  // key를 이런식으로 하면 오타를 낼 일이 없다.
  // 쿼리 키를 일관적으로 해야 캐시된 데이터를 캐시가 잘 제공할 수 있다.
  const { data = fallback } = useQuery(queryKeys.treatments, getTreatments, {});
  return data;
}

커스텀 훅은 위에 써놨듯이 로직을 재활용하기 위해서 사용한다. 

위 코드에서 "{ data = [] }"으로 해도 되지만 굳이 fallback을 선언한 이유는 가독성을 높여주기 위함이다.