개발자
nextjs에서 react query queryClient 처리
이전에 React를 사용할때는 queryClient를 한번 선언한 후 export하고 invalidateQueries를 실행하는 곳에서 import하여 사용했습니다. 물론 QueryClientProvider에 주입도 선언한 queryClient 그대로 사용했구요. nextjs에서 queryClient를 react처럼 export해서 사용하지 않고 컴포넌트 내부에서 사용하는 이유가 있을까요? 궁금합니다. 또한 invalidateQueries를 사용할 때는 항상 컴포넌트나 커스텀 훅에서 useQueryClient()를 사용해야되는건가요?
1function MyApp({ Component, pageProps }) {
2 const [queryClient] = React.useState(() => new QueryClient());
3
4 return (
5 <QueryClientProvider client={queryClient}>
6...
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 12월 18일
Next.js에서 React Query의 `QueryClient`를 컴포넌트 내부에서 선언하는 주요 이유는 Next.js의 SSR과 관련이 있습니다. 각각의 페이지 요청마다 별도로 생성된 `QueryClient` 인스턴스가 필요하기 때문입니다. 만약 `QueryClient`를 모듈 수준에서 한 번만 생성하고 export한다면, 모든 페이지 요청이 동일한 클라이언트 인스턴스를 공유하게 되어 서버 사이드 렌더링 시 발생할 수 있는 상태 충돌 문제를 초래할 수 있습니다. 따라서 각 컴포넌트에서 새로운 `QueryClient` 인스턴스를 생성하여 사용하며, 이 인스턴스는 해당 컴포넌트의 생명주기 동안에만 유효합니다. 또한, `invalidateQueries`를 사용할 때는 항상 해당 컴포넌트나 custom hook 내부에서 `useQueryClient()` Hook을 사용해야 합니다. 이렇게 하면 현재 active 상태인 Query Client instance에 접근하여 해당 클라이언트와 연결된 쿼리 데이터를 invalidate(무효화) 할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!