React-query Preloading

왜안됨???

React-query에서 초기 데이터를 받아오려고 하였다. 공식문서에서는 2가지 방법을 추천해 주었는데 처음은 initialData를 사용해서 query에 직접적으로 초기 데이터를 주입시키는 것이고 두번째로는 Hydrate를 이용해서 하는 방법이다.

문제

나는 Provider를 초기화 시킨 상태로 시작하고 싶었기 때문에 페이지 흐름을 서버 컴포넌트 에서 데이터를 받아 Provider에 주입시키는 꼴로 사용하려 하였다 하지만 생각대로 되지 않았다

queryclient를 서버 컴포넌트에서 만들어서 provider에 주입하려 하였지만 queryClient는 client컴포넌트에서만 쓸수 있었고 서버에 사용가능한 query-core경로로 가져왔지만 콜스텍 에러가 발생하였다.

해당 에러사진은 아니지만 에러 명은 똑같았음…

코드

import Providers from "./providers";
import ClientLayout from "./layout.client";
import { loadMyInfoAPI } from "@/apis/auth";
import { QueryClient } from "@tanstack/react-query";
// import { QueryClient } from "@tanstack/query-core";
// 해당 컴포넌트도 있음
export const metadata = {
  title: "NodeBird",
  description: "NodeBird with NextJs 13 beta",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(["user"], loadMyInfoAPI);
  return (
    <html lang="en">
      <body>
        <Providers initialClient={queryClient}>
          <ClientLayout>{children}</ClientLayout>
        </Providers>
      </body>
    </html>
  );
}

"use client";

import { loadMyInfoAPI } from "@/apis/auth";
import { store } from "@/store/store";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import React, { FC, PropsWithChildren, ReactNode } from "react";
import { Provider } from "react-redux";

interface Props {
  initialClient: QueryClient;
  children: ReactNode;
}

const Providers: FC<Props> = ({ initialClient, children }) => {
  return (
    <Provider store={store()}>
      <QueryClientProvider client={initialClient}>
        {children}
      </QueryClientProvider>
    </Provider>
  );
};

export default Providers;

https://github.com/TanStack/query/issues/4933

해당 이슈를 보고 컴포넌트를 쪼개서 서버 컴포넌트와 클라이언트 컴포넌트를 나눠 사용했지만 여전히 call stack 에러가 뜨는것은 마찬가지였다.