Overview | TanStack Query Docs

<aside> 💡 react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리로, 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌다.

</aside>

기능

• 캐싱
• queryKey를 이용한 동일한 데이터에 대한 중복 요청을 단일 요청으로 통합
• 백그라운드에서 “오래된” 데이터 업데이트
• 데이터가 얼마나 오래되었는지 알 수 있다.
• 데이터 업데이트를 가능한 빠르게 반영
• 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화
• 서버 상태의 메모리 및 가비지 수집 관리
• 구조 공유를 사용하여 쿼리 결과를 메모화

React Query기본설정

$ npm i @tanstack/react-query
# or
$ pnpm add @tanstack/react-query
# or
$ yarn add @tanstack/react-query

QueryClient

• QueryClient 공식 사이트 참고
• QueryClientProvider 공식 사이트 참고

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

const queryClient = new QueryClient({
	defaultOptions: {
	    queries: {
	      retry: 3,
	      useErrorBoundary: true,
	    },
	    mutations: {
	      useErrorBoundary: true,
	    },
	  },
});