feat: app directory에서 ReactQuery 사용시 pre-fetch로 데이터를 전달하기 위한 코드 추가

apps/web/app/my/edit/components/HydratedUserInfo.tsx

@@ -0,0 +1,17 @@
+import { dehydrate } from "@tanstack/react-query";
+import ProfileEditPage from "app/my/edit/components/Temp";
+import { getUserInfo } from "lib/apis/user";
+import getQueryClient from "lib/getQueryClient";
+import HydrateOnClient from "lib/hydrateOnClient";
+import { reactQueryKeys } from "lib/queryKeys";
+
+export default async function HydratedUserInfo() {
+  const queryClient = getQueryClient();
+  await queryClient.prefetchQuery(reactQueryKeys.userInfo(), getUserInfo);
+  const dehydratedState = dehydrate(queryClient);
+  return (
+    <HydrateOnClient state={dehydratedState}>
+      <ProfileEditPage />
+    </HydrateOnClient>
+  );
+}

apps/web/lib/getQueryClient.tsx

@@ -0,0 +1,7 @@
+import { QueryClient } from "@tanstack/react-query";
+import { cache } from "react";
+
+// `QueryClient` 의 요청 범위 싱글톤 인스턴스를 만든다.
+// 이렇게 하면 서로 다른 사용자와 요청 간에 데이터가 공유되지 않고 여전히 요청당 한 번만 QueryClient를 생성한다.
+const getQueryClient = cache(() => new QueryClient());
+export default getQueryClient;

apps/web/lib/hydrateOnClient.tsx

@@ -0,0 +1,4 @@
+"use client";
+
+import { Hydrate as HydrateOnClient } from "@tanstack/react-query";
+export default HydrateOnClient;