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

안녕하세요!

저는 fetch를 사용하지않고 axios를 사용해봤는데요!

서버에서 prefetch한 데이터가 초기에 useQuery에 값이 없는 이슈가 있어서 디깅을 해보다가 ReactQueryProvider에서 선언한 queryClient와 Home.tsx에서 선언한 queryClient가 달라 캐시한 값을 가져오지 못한다고 생각하는데 혹시 맞을까요?

"use client";

import { useState } from "react";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { isProduction } from "@/app-src/shared/env";

export const ReactQueryProvider = ({ children }: React.PropsWithChildren) => {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: Infinity,
            gcTime: Infinity,
          },
        },
      })
  );

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      {!isProduction && <ReactQueryDevtools initialIsOpen={false} />}
    </QueryClientProvider>
  );
};

import { PostIndex } from "@/app-src/post/[slug]";
import { API_PATH } from "@/app-src/shared/apis";
import { getPost } from "@/app-src/shared/apis/post/get-post";
import {
  dehydrate,
  HydrationBoundary,
  QueryClient,
} from "@tanstack/react-query";

const PostPage = async ({ params }: { params: { slug: string } }) => {
  const { slug } = params;
  const queryClient = new QueryClient();

  

  // 서버에서 미리 데이터를 패칭
  await queryClient.prefetchQuery({
    queryKey: [API_PATH.POST(slug)],
    queryFn: () => getPost(slug),
  });

  const a = queryClient.getQueryData([API_PATH.POST(slug)]);

  console.log(a, "a");

  // 데이터 직렬화
  const dehydratedState = dehydrate(queryClient);

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

export default PostPage;

"use client";

import { API_PATH } from "@/app-src/shared/apis";
import { getPost } from "@/app-src/shared/apis/post/get-post";
import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";

export const PostIndex = () => {
  const { slug } = useParams<{ slug: string }>();
  

  const { data } = useQuery({
    queryKey: [API_PATH.POST(slug)],
    queryFn: () => getPost(slug),
  });

  // 초기에 없음 -> 패칭 -> 있음
  console.log(data, "data");

  

  return (
    <div>
      <div>{data?.title}</div>
    </div>
  );
};

만약 제가 생각한게 맞다면 어떻게 해결해야할까요?