작성
·
194
·
수정됨
0
prefetchQuery 서버컴포넌트에서 데이터를 한번 불러오면, 정상적으로 불러왔는지 확인할 수 있나요??
서버 컴포넌트에서 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
백엔드 서버쪽에서도 라우터 호출 여부로 확인 가능하고, 브라우저에서도 리액트쿼리 데브툴로 확인 가능합니다.
동작하고있는지 아닌지는 prefetchQuery의 staleTime을 조금 늘려둔 다음에 브라우저에서 다시 typeData를 요청을 하는가로 판단할 수 있습니다. 브라우저에서 요청을 보내면 안 됩니다.
넵. 제일 최상단 layout.tsx에 provider로 감싸져있습니다.
useQuery 호출하는 부분 주석처리해도, prefetchQuery로 데이터 가져오기 때문에
데브툴에 표시 돼야 될 것 같은데, 값도 안찍히고, console.log(dehydratedState) 찍어봐도 터미널창에 찍힌 값은 비어있어서요.
리액트쿼리 데브툴에 키값이 없으면 prefetchQuery가 정상호출되지 않았다고 봐도되나요??