React Query Loading 중앙화

React Query에서 데이터를 불러오는 올 때 isLoading을 중앙화할 수 있다.

1. Loading 컴포넌트를 만든다.
2. App.tsx에 Loading 컴포넌트를 넣어준다.

Loading

import { Spinner } from '@chakra-ui/react';
import { useIsFetching, useIsMutating } from 'react-query';

interface Props {
  isLoading?: boolean;
}
export default function Loading({ isLoading }: Props) {
  // useIsFetching은 현재 가져오고 있는 쿼리 호출의 정수 값을 리턴한다.
  const isFetching = useIsFetching(); // for now, just don't display
  // useIsFetching과 비슷하지만 변이 호출 중 현재 해결되지 않은 것이 있는지 알려준다.
  const isMutating = useIsMutating();
  
  const display = isLoading ? 'inherit' : isFetching || isMutating ? '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}
    />
  );
}

• 기본적으로 isFetching이나 isMutating이 true이면 Spinner가 나오게 했다.
• React Query를 사용하지 않는 부분에서도 Spinner가 나오고 싶게 하기 위해서 isLoading이란 props를 받았다.
• useIsFetching()
  
  • 중앙화된 로딩 인디케이션 적용
  • 현재 가져오는 중인 쿼리가 있는지 알려주는 훅
  • 각각의 커스텀 훅에 대해 isFetching을 사용할 필요가 없어진다.
  • 현재 가져오기 상태인 쿼리 호출의 수를 나타내는 정수값을 반환한다.
  • useIsFetching이 0보다 크면 가져오기 상태인 호출이 존재하며 참으로 평가된다.
• useIsMutating()
  • useIsFetching과 같으며 유일한 차이점은 mutate 호출 중인 것을 기준으로 알려준다.

App.tsx

  return (
    <QueryClientProvider client={queryClient}>
      <ChakraProvider>
        <GoogleOAuthProvider clientId={clientId}>
          <Scrollbars
            style={{ width: '100vw', height: '100vh' }}
            autoHide
            autoHideTimeout={1000}
            // Duration for hide animation in ms.
            autoHideDuration={200}
          >
            <BrowserRouter>
              <Loading /> // 중앙화한 Loading
              <section className={'h-[5.7rem]'} onClick={onCloseProduct}>
                <Header />
              </section>
              <section className={'h-noneHeader'} onClick={onCloseProduct}>
                <Routes>
                // ... 경로들
                </Routes>
              </section>
            </BrowserRouter>
          </Scrollbars>
          {showDevtools && <ReactQueryDevtools />}
        </GoogleOAuthProvider>
      </ChakraProvider>
    </QueryClientProvider>
  );

 

-출처

https://velog.io/@zooyaho/React-Query-%EC%A4%91%EC%95%99-%EC%A7%91%EC%A4%91%ED%99%94

React Query - 중앙 집중화

https://www.udemy.com/course/react-query-react/