Tanstack-Query

와치덕스는 호출한 api데이터 캐싱을 위해 Tanstack-Query라이브러리를 사용하고 있습니다.

api데이터 캐싱을 한다고, api를 호출안하는게 아니고 엄밀하게말하면 렌더링을 캐싱하는겁니다!

이때, 캐싱하기 위해 사용하는 훅의 종류가 여러개있는데요 각 훅들의 사용처와 사용법들을 간단하게 정리해보았습니다.

공식문서상의 예시 뿐만아니라 저희팀에선 어떻게 적용하고있는지도 작성하였으니 활용에 도움이 될 것 같습니다.

기본설정

Tanstack을 사용하려면 기본설정들을 해야합니다.

설정먼저 알아봅시다.

QueryClientProvider

//일반적인 예시
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({ /* options */});

function App() {
  return (
   <QueryClientProvider client={queryClient}>
      <div>성호 짱</div>
   </QueryClientProvider>;
  );
}

QueryClient

import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      // ...
    },
  },
});