본문 바로가기
Frontend/NextJS

[NextJS] NextJS에 React-Query Provider 설정

by 모너아링 2024. 5. 16.

Introduction

NextJS 환경에서 React-Query를 적용하기 위해 Provider를 설정하는 방식에 대해 알아보려 한다.

설치

npm install @tanstack/react-query

npm 환경이기 때문에 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를 사용하여 참조 동일성을 유지하며, 상태 관리를 조절하고 컴포넌트 렌더링과 상태 업데이트를 조절하기 위함.