|
| 1 | +'use client' |
| 2 | +import { use, useState, useEffect } from 'react' |
| 3 | +import { useQueryClient, useQuery, dehydrate, HydrationBoundary } from '@tanstack/react-query' |
| 4 | +import type { UniversalRouteProps, QueryFn } from './UniversalRouteScreen.helpers' |
| 5 | +import { useRouteParams } from './useRouteParams' |
| 6 | +import { isExpoWebLocal } from '../appConfig' |
| 7 | + |
| 8 | +/* --- Helpers --------------------------------------------------------------------------------- */ |
| 9 | + |
| 10 | +const getSSRData = () => { |
| 11 | + const $ssrData = document.getElementById('ssr-data') |
| 12 | + const ssrDataText = $ssrData?.getAttribute('data-ssr') |
| 13 | + const ssrData = ssrDataText ? (JSON.parse(ssrDataText) as Record<string, any>) : null |
| 14 | + return ssrData |
| 15 | +} |
| 16 | + |
| 17 | +const getDehydratedSSRState = () => { |
| 18 | + const $ssrHydrationState = document.getElementById('ssr-hydration-state') |
| 19 | + const ssrHydrationStateText = $ssrHydrationState?.getAttribute('data-ssr') |
| 20 | + const ssrHydrationState = ssrHydrationStateText ? (JSON.parse(ssrHydrationStateText) as Record<string, any>) : null |
| 21 | + return ssrHydrationState |
| 22 | +} |
| 23 | + |
| 24 | +/** --- <UniversalRouteScreen/> ---------------------------------------------------------------- */ |
| 25 | +/** -i- Universal Route Wrapper to provide query data on mobile, the browser and during server rendering */ |
| 26 | +export const UniversalRouteScreen = <Fetcher extends QueryFn>(props: UniversalRouteProps<Fetcher>) => { |
| 27 | + // Props |
| 28 | + const { params: routeParams, searchParams, queryBridge, routeScreen: RouteScreen, ...screenProps } = props |
| 29 | + const { routeParamsToQueryKey, routeParamsToQueryInput, routeDataFetcher } = queryBridge |
| 30 | + const fetcherDataToProps = queryBridge.fetcherDataToProps || ((data: ReturnType<Fetcher>) => data) |
| 31 | + |
| 32 | + // Hooks |
| 33 | + const nextRouterParams = useRouteParams(props) |
| 34 | + |
| 35 | + // Context |
| 36 | + const queryClient = useQueryClient() |
| 37 | + |
| 38 | + // State |
| 39 | + const [hydratedData, setHydratedData] = useState<Record<string, any> | null>(null) |
| 40 | + const [hydratedQueries, setHydratedQueries] = useState<Record<string, any> | null>(null) |
| 41 | + |
| 42 | + // Vars |
| 43 | + const isBrowser = typeof window !== 'undefined' |
| 44 | + const queryParams = { ...routeParams, ...searchParams, ...nextRouterParams } |
| 45 | + const queryKey = routeParamsToQueryKey(queryParams) |
| 46 | + const queryInput = routeParamsToQueryInput(queryParams) |
| 47 | + |
| 48 | + // -- Effects -- |
| 49 | + |
| 50 | + useEffect(() => { |
| 51 | + const ssrData = getSSRData() |
| 52 | + if (ssrData) setHydratedData(ssrData) // Save the SSR data to state, removing the SSR data from the DOM |
| 53 | + const hydratedQueyClientState = getDehydratedSSRState() |
| 54 | + if (hydratedQueyClientState) setHydratedQueries(hydratedQueyClientState) // Save the hydrated state to state, removing the hydrated state from the DOM |
| 55 | + }, []) |
| 56 | + |
| 57 | + // -- Query -- |
| 58 | + |
| 59 | + const queryConfig = { |
| 60 | + queryKey, |
| 61 | + queryFn: async () => await routeDataFetcher(queryInput), |
| 62 | + initialData: queryBridge.initialData, |
| 63 | + } |
| 64 | + |
| 65 | + // -- Browser -- |
| 66 | + |
| 67 | + if (isBrowser) { |
| 68 | + const hydrationData = hydratedData || getSSRData() |
| 69 | + const hydrationState = hydratedQueries || getDehydratedSSRState() |
| 70 | + const renderHydrationData = !!hydrationData && !hydratedData // Only render the hydration data if it's not already in state |
| 71 | + |
| 72 | + const { data: fetcherData } = useQuery({ |
| 73 | + ...queryConfig, |
| 74 | + initialData: isExpoWebLocal ? undefined : { |
| 75 | + ...queryConfig.initialData, |
| 76 | + ...hydrationData, |
| 77 | + }, |
| 78 | + refetchOnMount: isExpoWebLocal, |
| 79 | + }) |
| 80 | + const routeDataProps = fetcherDataToProps(fetcherData as Awaited<ReturnType<Fetcher>>) as Record<string, unknown> // prettier-ignore |
| 81 | + |
| 82 | + return ( |
| 83 | + <HydrationBoundary state={hydrationState}> |
| 84 | + {renderHydrationData && <div id="ssr-data" data-ssr={JSON.stringify(fetcherData)} />} |
| 85 | + {renderHydrationData && <div id="ssr-hydration-state" data-ssr={JSON.stringify(hydrationState)} />} |
| 86 | + <RouteScreen |
| 87 | + {...routeDataProps} |
| 88 | + queryKey={queryKey} |
| 89 | + queryInput={queryInput} |
| 90 | + {...screenProps} // @ts-ignore |
| 91 | + params={routeParams} |
| 92 | + searchParams={searchParams} |
| 93 | + /> |
| 94 | + </HydrationBoundary> |
| 95 | + ) |
| 96 | + } |
| 97 | + |
| 98 | + // -- Server -- |
| 99 | + |
| 100 | + const fetcherData = use(queryClient.fetchQuery(queryConfig)) as Awaited<ReturnType<Fetcher>> |
| 101 | + const routeDataProps = fetcherDataToProps(fetcherData) as Record<string, unknown> |
| 102 | + const dehydratedState = dehydrate(queryClient) |
| 103 | + |
| 104 | + return ( |
| 105 | + <HydrationBoundary state={dehydratedState}> |
| 106 | + {!!fetcherData && <div id="ssr-data" data-ssr={JSON.stringify(fetcherData)} />} |
| 107 | + {!!dehydratedState && <div id="ssr-hydration-state" data-ssr={JSON.stringify(dehydratedState)} />} |
| 108 | + <RouteScreen |
| 109 | + {...routeDataProps} |
| 110 | + queryKey={queryKey} |
| 111 | + queryInput={queryInput} |
| 112 | + {...screenProps} // @ts-ignore |
| 113 | + params={routeParams} |
| 114 | + searchParams={searchParams} |
| 115 | + /> |
| 116 | + </HydrationBoundary> |
| 117 | + ) |
| 118 | +} |
0 commit comments