[TanStack Query] TanStack Query란

TanStack Query란

네트워크에서 받아온 데이터의 상태를 관리할 수 있도록 도와주는 라이브러리입니다.

공식문서

TS/JS, React, Solid, Vue, Svelte를 위한 강력한 비동기 상태관리 라이브러리

세부적인 상태관리, 수동적인 refetching 그리고 끊임없는 비동기 스파게티 코드를 토스해라. 텐스택 쿼리는 선언적이고, 최신의 자동화된 쿼리 그리고 mutation을 줄 것입니다. 그 결과 개발자와 사용자 경험을 향상시킬 수 있을 것입니다.

선언적이고 자동적입니다.

데이터 fetching 로직을 일일이 작성할 필요가 없습니다. TanStack Query에게 어디서 데이터를 가져오면 되는지 얼마나 데이터의 신선도를 유지할 것인지 말해주세요. 그러면 나머지는 자동적일것입니다. TanStack 쿼리는 캐싱, 백그라운드 업데이트, 오래된(stale) 데이터를 별도의 설정없이 자동으로 해결해줍니다.

심플하고 친숙합니다.

프로미스와 async/await에 대해서 알고 있다면, 당신은 이미 TanStack 쿼리의 사용법을 알고 있는 것입니다. 글로벌 상태, reducer, 복잡한 설정을 요구하지 않습니다. 단순히 함수만 전달해주면 됩니다.

광범위합니다.

개발자도구, 무제한 로딩 API, 데이터를 업데이트하는 mutation tools를 제공해줍니다.

리액트 쿼리는 리액트를 위한 데이터 fetching 라이브러리로만 여겨지고 있는데 좀더 엄밀히 말하자면, 리액트 쿼리는 fetching, caching, synchronizing and updating server state를 해줍니다.

• Caching... (possibly the hardest thing to do in programming)
• Deduping multiple requests for the same data into a single request

시작하기

npm i @tanstack/react-query

• Query client 만들기
  • Query client가 쿼리와 캐시를 관리합니다.
• QueryProvider 적용하기
  • 자식 컴포넌트에 캐시 및 클라이언트 구성을 제공합니다.
  • QueryProvider는 쿼리 클라이언트를 값으로 사용합니다.
• useQuery 호출하기
  • 서버에서 데이터를 받으려면 useQuery Hook을 사용해야합니다.

적용하기

import { Posts } from "./Posts";
import "./App.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
const queryClient = new QueryClient();
 
function App() {
  return (
    // Provider의 자식들은 캐시를 포함한 쿼리클라이언트에 접근이 가능합니다. 
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Blog &apos;em Ipsum</h1>
        <Posts />
      </div>
    </QueryClientProvider>
  );
}
 
export default App;

useQuery에서 반환되는 객체를 확인할 수 있습니다.

useQuery | TanStack Query React Docs

isFetching vs isLoading

• isFetching
  • 비동기 쿼리가 아직 해결되지 않았다는 것을 의미
• isLoading
  • 캐시된 데이터가 없음. isFetching보다 작은 개념

Devtools

npm i @tanstack/react-query-devtools

Devtools | TanStack Query React Docs

stale, gcTime

stale

• stale data라는 것은 만료되었거나 refetch될 준비가 된 데이터를 말합니다.
• 여전히 캐시에 있습니다. 하지만 재검증 되야 한다는 뜻입니다.
• data refetch는 오직 stale data에만 트리거됩니다.
  • 예를들어, 컴포넌트가 재마운트 된다거나, 윈도우가 refocus될 때, data refetching이 발생합니다.
  • staleTime이라는 것은 데이터의 최대 수명으로 생각하면 됩니다.

gcTime

• gcTime은 데이터를 캐시에 유지할 시간을 결정합니다.
• 데이터와 연관될 활성 useQuery 표시가 없고, 데이터가 현재 페이지에 표시되지 않으면, cold storage 상태로 들어갑니다.