React | React-query v5(TanStack Query) 사용하기

React-query v5(TanStack Query) 설치

npm i @tanstack/react-query

 

최상위 컴포넌트를 QueryClientProvider로 감싸줘야 함

import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      ...
    </QueryClientProvider>
  );
}

 

useQuery v5에서 onSuccess, onError, onSettled 콜백들은 이제 사용되지 않음

import { useQuery } from '@tanstack/react-query'

const { data, error, isLoading } = useQuery({
  queryKey: ['data', Url], 
  queryFn: () => fetchData(Url),
  enabled: !!selectedID,
});

 

useQuery를 통해 data, isPending, isLoading, isError, error 등 다양한 상태 사용 가능

• queryKey: 이 키 값을 기준으로 데이터 캐싱
  • 쿼리가 의존하는 변수도 queryKey 리스트에 추가
  • 위 경우에는 Url이라는 변수에 의존함
• queryFn: 데이터를 요청하는 함수
• enabled: 쿼리가 자동으로 실행되지 않도록 설정하는 옵션
  • false로 설정 시 query가 자동으로 실행되지 않음
  • 위 경우에는 selectedID가 존재할 때만 쿼리 요청을 함

 

TanStack | High Quality Open-Source Software for Web Developers