From 158f30bafc07cedc92ced95dda1e5855fa1ad96f Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Thu, 11 Apr 2024 22:13:54 +0800
Subject: [PATCH] fix: wrap home page

Signed-off-by: Innei <i@innei.in>
---
 src/app/(app)/(home)/layout.tsx | 39 ++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/app/(app)/(home)/layout.tsx b/src/app/(app)/(home)/layout.tsx
index 78a10e7322..2650b2f6d8 100644
--- a/src/app/(app)/(home)/layout.tsx
+++ b/src/app/(app)/(home)/layout.tsx
@@ -1,32 +1,35 @@
 import { dehydrate } from '@tanstack/react-query'
-import type { PropsWithChildren } from 'react'
 
 import { QueryHydrate } from '~/components/common/QueryHydrate'
 import { isShallowEqualArray } from '~/lib/lodash'
 import { getQueryClient } from '~/lib/query-client.server'
 import { apiClient } from '~/lib/request'
-import { requestErrorHandler } from '~/lib/request.server'
+import { definePrerenderPage, requestErrorHandler } from '~/lib/request.server'
 
 import { queryKey } from './query'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 3600
+export default definePrerenderPage()({
+  fetcher() {
+    const queryClient = getQueryClient()
+    return queryClient
+      .fetchQuery({
+        queryKey,
+        queryFn: async () => {
+          return (await apiClient.aggregate.getTop(5)).$serialized
+        },
+      })
+      .catch(requestErrorHandler)
+  },
+  async Component(props) {
+    const queryClient = getQueryClient()
 
-export default async function HomeLayout(props: PropsWithChildren) {
-  const queryClient = getQueryClient()
-  await queryClient
-    .fetchQuery({
-      queryKey,
-      queryFn: async () => {
-        return (await apiClient.aggregate.getTop(5)).$serialized
+    const dehydrateState = dehydrate(queryClient, {
+      shouldDehydrateQuery(query) {
+        return isShallowEqualArray(query.queryKey as any, queryKey)
       },
     })
-    .catch(requestErrorHandler)
-
-  const dehydrateState = dehydrate(queryClient, {
-    shouldDehydrateQuery(query) {
-      return isShallowEqualArray(query.queryKey as any, queryKey)
-    },
-  })
-  return <QueryHydrate state={dehydrateState}>{props.children}</QueryHydrate>
-}
+    return <QueryHydrate state={dehydrateState}>{props.children}</QueryHydrate>
+  },
+})