fix: remove rq hydrate

Signed-off-by: Innei <[email protected]>

Author: Innei

src/app/layout.tsx

@@ -1,21 +1,19 @@
 import '../styles/index.css'
 
-import { dehydrate } from '@tanstack/react-query'
 import { Analytics } from '@vercel/analytics/react'
 import { ToastContainer } from 'react-toastify'
-import { headers } from 'next/dist/client/components/headers'
 
 import { ClerkProvider } from '@clerk/nextjs'
 
 import { appConfig } from '~/app.config'
 import { Root } from '~/components/layout/root/Root'
-import { REQUEST_GEO, REQUEST_PATHNAME } from '~/constants/system'
 import { defineMetadata } from '~/lib/define-metadata'
 import { sansFont, serifFont } from '~/lib/fonts'
+import { AggregationProvider } from '~/providers/root/aggregation-data-provider'
+import { queries } from '~/queries/definition'
 import { getQueryClient } from '~/utils/query-client.server'
 
 import { Providers } from '../providers/root'
-import { Hydrate } from './hydrate'
 import { init } from './init'
 
 init()
@@ -88,33 +86,36 @@ export default async function RootLayout(props: Props) {
 
   const queryClient = getQueryClient()
 
-  const dehydratedState = dehydrate(queryClient, {
-    shouldDehydrateQuery: (query) => {
-      if (query.state.error) return false
-      if (!query.meta) return true
-      const {
-        shouldHydration,
-        hydrationRoutePath,
-        skipHydration,
-        forceHydration,
-      } = query.meta
-
-      if (forceHydration) return true
-      if (hydrationRoutePath) {
-        const pathname = headers().get(REQUEST_PATHNAME)
-
-        if (pathname === query.meta?.hydrationRoutePath) {
-          if (!shouldHydration) return true
-          return (shouldHydration as Function)(query.state.data as any)
-        }
-      }
-
-      if (skipHydration) return false
-
-      return (shouldHydration as Function)?.(query.state.data as any) ?? false
-    },
+  // const dehydratedState = dehydrate(queryClient, {
+  //   shouldDehydrateQuery: (query) => {
+  //     if (query.state.error) return false
+  //     if (!query.meta) return true
+  //     const {
+  //       shouldHydration,
+  //       hydrationRoutePath,
+  //       skipHydration,
+  //       forceHydration,
+  //     } = query.meta
+
+  //     if (forceHydration) return true
+  //     if (hydrationRoutePath) {
+  //       const pathname = headers().get(REQUEST_PATHNAME)
+
+  //       if (pathname === query.meta?.hydrationRoutePath) {
+  //         if (!shouldHydration) return true
+  //         return (shouldHydration as Function)(query.state.data as any)
+  //       }
+  //     }
+
+  //     if (skipHydration) return false
+
+  //     return (shouldHydration as Function)?.(query.state.data as any) ?? false
+  //   },
+  // })
+
+  const data = await queryClient.fetchQuery({
+    ...queries.aggregation.root(),
   })
-  const geo = headers().get(REQUEST_GEO)
 
   return (
     // <ClerkProvider localization={ClerkZhCN}>
@@ -124,12 +125,12 @@ export default async function RootLayout(props: Props) {
           className={`${sansFont.variable} ${serifFont.variable} m-0 h-full p-0 font-sans`}
         >
           <Providers>
-            <Hydrate state={dehydratedState}>
-              <Root>{children}</Root>
-            </Hydrate>
+            <AggregationProvider aggregationData={data} />
+            {/* <Hydrate state={dehydratedState}> */}
+            <Root>{children}</Root>
+            {/* </Hydrate> */}
           </Providers>
           <ToastContainer />
-          {!!geo && <div>{geo}</div>}
         </body>
       </html>
       <Analytics />

src/providers/root/aggregation-data-provider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, useEffect, useRef } from 'react'
 import { atom, useAtomValue } from 'jotai'
 import { selectAtom } from 'jotai/utils'
@@ -6,23 +8,24 @@ import type { FC, PropsWithChildren } from 'react'
 
 import { fetchAppUrl } from '~/atoms'
 import { login } from '~/atoms/owner'
-import { useAggregationQuery } from '~/hooks/data/use-aggregation'
 import { jotaiStore } from '~/lib/store'
 
 export const aggregationDataAtom = atom<null | AggregateRoot>(null)
 
-export const AggregationProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { data } = useAggregationQuery()
-
+export const AggregationProvider: FC<
+  PropsWithChildren<{
+    aggregationData: AggregateRoot
+  }>
+> = ({ children, aggregationData }) => {
   useEffect(() => {
-    if (!data) return
-    jotaiStore.set(aggregationDataAtom, data)
-  }, [data])
+    if (!aggregationData) return
+    jotaiStore.set(aggregationDataAtom, aggregationData)
+  }, [aggregationData])
 
   const callOnceRef = useRef(false)
   useEffect(() => {
     if (callOnceRef.current) return
-    if (!data?.user) return
+    if (!aggregationData?.user) return
     callOnceRef.current = true
     login().then((logged) => {
       if (logged) {
@@ -32,7 +35,7 @@ export const AggregationProvider: FC<PropsWithChildren> = ({ children }) => {
         }, 1000)
       }
     })
-  }, [data?.user])
+  }, [aggregationData?.user])
 
   return children
 }

src/providers/root/index.tsx

@@ -6,7 +6,6 @@ import { ThemeProvider } from 'next-themes'
 import type { PropsWithChildren } from 'react'
 
 import { ProviderComposer } from '../../components/common/ProviderComposer'
-import { AggregationProvider } from './aggregation-data-provider'
 import { DebugProvider } from './debug-provider'
 import { EventProvider } from './event-provider'
 import { JotaiStoreProvider } from './jotai-provider'
@@ -20,7 +19,7 @@ const contexts: JSX.Element[] = [
   <ThemeProvider key="themeProvider" />,
   <ReactQueryProvider key="reactQueryProvider" />,
   <JotaiStoreProvider key="jotaiStoreProvider" />,
-  <AggregationProvider key="aggregationProvider" />,
+
   <EventProvider key="viewportProvider" />,
 
   <PageScrollInfoProvider key="PageScrollInfoProvider" />,