React Query DevTools로 삶을 더 쉽게 만드세요

React Query, 특히 고급 주제를 사용할 때 무슨 일이 일어나고 있는지 디버그하기가 꽤 어려울 수 있습니다.

또는 모든 것이 빠르게 잘 작동하는지 확인하기 위해 쿼리를 무효화하려는 경우가 있습니다.

바로 여기에서 React Query DevTools가 유용합니다 🥳.

활성화되면 다음과 같이 표시됩니다.

React Query DevTools 활성화

DevTools를 사용하려면 기본 앱 래퍼에 설치하는 것이 좋습니다. 이런 식으로 그들은 모든 곳에서 볼 수 있습니다.

그리고 기본적으로 환경이 development 모드에 있을 때만 표시되므로 걱정하지 마십시오.
App.js 파일을 열고 DevTools를 가져옵니다.

import {ReactQueryDevtools} from 'react-query/devtools';

그것을 가져오려면 다음과 같이 QueryClientProvider 블록 안에 배치해야 합니다.

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      # Your app components
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

이 모드의 경우 다음과 같은 선택적 속성을 전달할 수 있습니다.

initialIsOpen : 기본적으로 열린 상태

로 표시하려면 이것을 true로 설정할 수 있습니다.

position : top-left , top-right , bottom-left , bottom-right 중 하나일 수 있으며 React Query 로고의 위치를 ​​결정합니다.

그런 다음 기본 스타일이나 클릭 핸들러를 확장하는 데 사용할 수 있는 몇 가지 옵션을 얻습니다.
이 모든 것은 해당되는 경우 className , style 및 onClick와 같은 기본값을 재정의하는 데 사용할 수 있습니다.

panelProps

closeButtonProps

toggleButtonProps

또는 포함 모드에서 사용할 때 일반 구성 요소로 렌더링할 수 있습니다.

import {ReactQueryDevtoolsPanel} from 'react-query/devtools';

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtoolsPanel />
    </QueryClientProvider>
  );
}

React 쿼리 DevTools 사용

DevTools 설정으로 애플리케이션을 스풀링하면 발생한 모든 쿼리를 빠르게 추적할 수 있습니다.

그 중 하나를 클릭하면 이 쿼리에 대한 많은 정보를 볼 수 있습니다.

쿼리 키

현재 상태

마지막 업데이트

캐시 내부의 데이터

다음 작업 중 하나를 빠르게 선택할 수 있습니다.

다시 가져오기

무효화

리셋

제거

날 믿어. React Query DevTools는 당신의 삶을 훨씬 더 쉽게 만들어줍니다.
쿼리를 다시 가져오는 시기, 쿼리에 포함된 데이터 또는 가져오기를 재시도한 횟수를 아는 것은 큰 도움이 됩니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는