add tanstack/react-query

src/app/pages/emptypage/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from 'next';
+import Test from '@/app/ui/test';
 
 export const metadata: Metadata = {
 	title: 'emptypage',
@@ -11,6 +12,9 @@ export default function Home() {
 				<div>
 					emptypage
 				</div>
+				<div>
+					<Test />
+				</div>
 			</main>
 		</div>
 	);

src/app/pages/layout.tsx

@@ -1,18 +1,23 @@
 import NavLinks from '@/app/ui/nav-links'
 import styles from '@/app/page.module.scss'
 import HeaderPanel from '../ui/header/headerPanel';
-import { DataProvider } from '@/app/context/data-context';
-import { fetchFruit } from '@/app/lib/action';
-import { getSessionToken } from '@/app/lib/session';
+import { getQueryClient } from '@/app/providers/getQueryClient';
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import { getUserData } from '@/app/lib/action';
 
 export default async function Layout({ children }: { children: React.ReactNode }) {
+	const queryClient = getQueryClient();
 
-	const fruitsData = await fetchFruit(100);
-	const token = await getSessionToken();
+	await Promise.all([
+		queryClient.prefetchQuery({
+			queryKey: ['userData'],
+			queryFn: () => getUserData()
+		})
+	])
 
 	return (
-		<DataProvider dataContext={fruitsData}>
-			<div className="flex">
+		<div className="flex">
+			<HydrationBoundary state={dehydrate(queryClient)}>
 				<NavLinks />
 				<div className={`${styles.mainContainter}`}>
 					<HeaderPanel />
@@ -20,7 +25,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
 						{children}
 					</main>
 				</div>
-			</div>
-		</DataProvider>
+			</HydrationBoundary>
+		</div>
 	);
 }