Introduction
NextJS 환경에서 React-Query를 적용하기 위해 Provider를 설정하는 방식에 대해 알아보려 한다.
설치
npm install @tanstack/react-querynpm 환경이기 때문에 npm을 기준으로 작성하였다.
React-Query Provider 적용
NextJS의 App Router에는 가장 상위 컴포넌트인 Layout 페이지에 Provider를 적용한다.
const [queryClient] = useState(() => new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 1,
}
}
}));
return (
<html lang="kr">
<body>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</body>
</html>
);
1. QueryClientProvider 로 감싼다.
2. queryClient를 선언하여 QueryClientProvider의 props로 전달한다.
queryClient에는 React-Query의 기본 옵션을 설정 할 수 있다.
refetchOnWindowFocus : 윈도우가 다시 포커스 되었을 때 데이터를 refetch 할지 여부retry : API 요청 실패 시 재시도 하는 횟수
useState를 사용하여 queryClient를 설정하는 이유?
useState를 사용하여 참조 동일성을 유지하며, 상태 관리를 조절하고 컴포넌트 렌더링과 상태 업데이트를 조절하기 위함.