[React] TanStack Query Devtools로 query정보 시각화하기

https://tanstack.com/query/latest/docs/react/devtools

Devtools | TanStack Query Docs

 

DevTools란?

Query가 어떻게 작동하고 저장되는지 볼 수 있게 하는 툴이다.

React Query의 모든 내부작업을 시각화하여 문제가 발생한 경우 디버깅 시간을 절약해준다.

 

$ npm i @tanstack/react-query-devtools

 

DevTool 가져와서 사용하기

Root 파일에 ReactQueryDevtools를 임포트하고 사용해준다.

import { Box } from "@chakra-ui/react";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Outlet } from "react-router-dom";
import Header from "./Header";

export default function Root() {
  return (
    <Box>
      <Header />
      <Outlet />
      <ReactQueryDevtools />
    </Box>
  );
}

 

렌더링된 화면을 보면 좌측하단에 귀여운 reactQuery 로고가 생긴 것을 볼 수 있다.

 

로고를 클릭하면 아래처럼 캐시에 저장된 Query를 확인 수 있다.

 

굿. 훨씬 가시성이 좋고 보기에도 편리하다.