tanstack query의 isFetching과 isLoading 차이, React Query Dev Tools

 

isFetching

비동기 쿼리가 아직 해결되지 않았다.

아직 fetch가 완료되지 않았지만, axios 호출이나 graphGL 호출 같은 다른 종류의 데이터를 가져오는 작업일 수 있다. 

 

isLoading

isFetching의 하위 집합으로 로딩 중이라는 것을 말한다. 

쿼리 함수가 아직 미해결이지만, 캐시된 데이터도 없다. 

이 쿼리를 전에 실행한 적이 없어서 데이터를 가져오는 중이고 캐시된 데이터도 없어서 보여줄 수 없다. 

 

=> 페이지네이션 측면에서 캐시된 데이터가 있는지 없는지 구분하는 것이 중요

 

 

React Query Dev Tools

=> 모든 쿼리의 상태, 활성, 비활성, stale(오래됨) 등을 알려준다. 

=> 마지막 업데이트 시간도 알려준다. 

 

=> 데이터 탐색기도 있어서 쿼리로 받은 데이터를 볼 수 있다. 

=> 쿼리 탐색기는 쿼리 자체를 볼 수 있다. 

 

@tanstak/react-query-devtools 에서 온다. 

 

QueryClientProvider 내에서 사용하면 된다. 

import { Posts } from "./Posts";
import "./App.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className='App'>
        <h1>Blog &apos;em Ipsum</h1>
        <Posts />
      </div>
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

export default App;