react-query v5 가 23.10.17에 릴리즈 되었습니다. 이전 버전과는 다르게 deprecated 된 기능도 있고,

기능의 명칭, 기능들 이 소소하게 바뀌어서 정리해 보려고 합니다.

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000,
			gcTime:6000,
      // ...option
    },
  },
});

function App() {
  return (
	 <QueryClientProvider client={queryClient}>
      <div>리액트쿼리</div>
   </QueryClientProvider>;
  );
}

• QueryClient를 사용하여 캐시 와 상호 작용할수 있습니다.
• QueryClient에서 모든 query 또는 mutation에 기본 옵션을 추가할 수 있으며 옵션의 종류는 다양합니다.

https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientsetquerydata

• react-query를 사용하기 위해서는 QueryClientProvider 를 최상단에서 감싸고 QueryClient 인스턴스를 client props로 넣어 애플리케이션에 연결해야 합니다.
• 위 코드에선 App.js 에서 QueryClientProvider로 컴포넌트를 감싸고, client props에 queryClient를 연결함으로써, 이 context는 앱에서 비동기 요청을 처리하는 background 계층이 됩니다.