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

oct.wanga님의 프로필 이미지

작성한 질문수

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

prefetchQuery 관련 질문

24.05.31 11:44 작성

·

165

·

수정됨

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>
    </>
  );
}

답변 1

0

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

2024. 05. 31. 11:51

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

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

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

2024. 05. 31. 13:01

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

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

2024. 05. 31. 13:26

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

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

2024. 05. 31. 13:27

RQProvider로 감싸져있나요?

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

2024. 05. 31. 13:33

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

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

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

2024. 05. 31. 13:39

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

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

2024. 05. 31. 13:48

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

 

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

2024. 05. 31. 14:48

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

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

2024. 05. 31. 17:03

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

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

2024. 05. 31. 17:06

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

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

2024. 05. 31. 17:08

넵. 감사합니다.