인프런 커뮤니티 질문&답변

oct.wanga님의 프로필 이미지
oct.wanga

작성한 질문수

Next + React Query로 SNS 서비스 만들기

prefetchQuery 관련 질문

작성

·

194

·

수정됨

0

  1. prefetchQuery 서버컴포넌트에서 데이터를 한번 불러오면, 정상적으로 불러왔는지 확인할 수 있나요??

  2. 서버 컴포넌트에서 prefetchQuery한 다음에 클라이언트컴포넌트에서
    useQuery로 불러오게 되면(queryKey 동일) 이미 데이터가 저장 되어 있는거로 알고 있는데,


    console.log를 찍어보게 되면, undefined가 뜬 다음에 데이터가 호출 됩니다.
    prefetchQuery가 정상적으로 동작 안하는게 아닌가 싶습니다.

     

export default function TestClient() {
  const { data } = useQuery({
    queryKey: ['typeData'],
    queryFn: getTypeData,
  });

   console.log(typeData);
   
   ...
export default async function TestServer() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({ queryKey: ['typeData'], queryFn: getTypeData });
  const dehydratedState = dehydrate(queryClient);

  return (
    <>
        <HydrationBoundary state={dehydratedState}>
          <TestClient />
        </HydrationBoundary>
    </>
  );
}

답변 2

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

  1. 백엔드 서버쪽에서도 라우터 호출 여부로 확인 가능하고, 브라우저에서도 리액트쿼리 데브툴로 확인 가능합니다.

  2. 동작하고있는지 아닌지는 prefetchQuery의 staleTime을 조금 늘려둔 다음에 브라우저에서 다시 typeData를 요청을 하는가로 판단할 수 있습니다. 브라우저에서 요청을 보내면 안 됩니다.

oct.wanga님의 프로필 이미지
oct.wanga
질문자

리액트쿼리 데브툴에 키값이 없으면 prefetchQuery가 정상호출되지 않았다고 봐도되나요??

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

네네 그렇습니다. prefetchQuery로 받아온 값을 useQuery에서 저장해야하거든요.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

RQProvider로 감싸져있나요?

oct.wanga님의 프로필 이미지
oct.wanga
질문자

넵. 제일 최상단 layout.tsx에 provider로 감싸져있습니다.
useQuery 호출하는 부분 주석처리해도, prefetchQuery로 데이터 가져오기 때문에

데브툴에 표시 돼야 될 것 같은데, 값도 안찍히고, console.log(dehydratedState) 찍어봐도 터미널창에 찍힌 값은 비어있어서요.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

네트워크 탭에서 첫 요청 response 확인해서 데이터 들어있는 채로 렌더링되는지 확인해보세요.

oct.wanga님의 프로필 이미지
oct.wanga
질문자

요청은 한번만 시도하고, res떨어지면서 화면이 렌더링됩니다.

 

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

강의 중에 ssr되는지 확인하는 강의 있습니다. 그렇게 확인해보셔야 합니다.

oct.wanga님의 프로필 이미지
oct.wanga
질문자

해당 api를 호출하지도 않고, 원하는 부분이 안그려지는거 봐서는 ssr이 정상적으로 동작하지 않는거같네요.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

getTypeData 함수부터 다시 살펴보세요

oct.wanga님의 프로필 이미지
oct.wanga
질문자

넵. 감사합니다.

oct.wanga님의 프로필 이미지
oct.wanga

작성한 질문수

질문하기