TanStack Query(React Query v4) 변경점 정리

사이드 프로젝트를 시작하면서 상태관리 도구로 오랜만에(=5개월) react-query를 쓰려 했는데 그 사이 버전 업데이트가.. 프론트엔드의 세계란ㅎㅎ

install

v4 이전

npm i react-query

v4 이후

npm i @tanstack/react-query
npm i @tanstack/react-query-devtools

• @tanstack/react-query-devtools : devtools

devtools

v4 이전

// ...
return (
  <QueryClientProvider client={queryClient}>
    // ...
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>;
)

• ReactQueryDevtools 컴포넌트 사용

v4

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

function App() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <Router />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

• @tanstack/react-query-devtools 별도의 패키지 설치 필요

useQuery

v4 이전

 const {
    isRefetching,
    isLoading,
    data: comments,
  } = useQuery("checkComments", () => getComments(articlesId), {
    onError: () => {},
  });

• queryKey 값에 문자열 또는 배열이 올 수 있다.

v4

 const {
    isRefetching,
    isLoading,
    data: comments,
  } = useQuery(["checkComments"], () => getComments(articlesId), {
    onError: () => {},
  });

참조

https://tanstack.com/query/latest/docs/react/overview
https://github.com/ssi02014/react-query-tutorial