Skip to content

Commit 1264655

Browse files
omBrattengomBratteng
authored
feat: add HydrationBoundary to _app (#4900)
1 parent 1e3358a commit 1264655

File tree

3 files changed

+41
-40
lines changed

3 files changed

+41
-40
lines changed

‎packages/webapp/pages/_app.tsx‎

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ import Head from 'next/head';
66
import 'focus-visible';
77
import { useConsoleLogo } from '@dailydotdev/shared/src/hooks/useConsoleLogo';
88
import { DefaultSeo, NextSeo } from 'next-seo';
9-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
9+
import type { DehydratedState } from '@tanstack/react-query';
10+
import {
11+
HydrationBoundary,
12+
QueryClient,
13+
QueryClientProvider,
14+
} from '@tanstack/react-query';
1015
import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
1116
import {
1217
useCookieBanner,
@@ -253,7 +258,9 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
253258
);
254259
}
255260

256-
export default function App(props: AppProps): ReactElement {
261+
export default function App(
262+
props: AppProps<{ dehydratedState: DehydratedState }>,
263+
): ReactElement {
257264
const [queryClient] = useState(
258265
() => new QueryClient(defaultQueryClientConfig),
259266
);
@@ -262,27 +269,33 @@ export default function App(props: AppProps): ReactElement {
262269
useError();
263270
useManualScrollRestoration();
264271

272+
const {
273+
pageProps: { dehydratedState },
274+
} = props;
275+
265276
return (
266277
<ProgressiveEnhancementContextProvider>
267278
<QueryClientProvider client={queryClient}>
268-
<BootDataProvider
269-
app={BootApp.Webapp}
270-
getRedirectUri={getRedirectUri}
271-
getPage={getPage}
272-
version={version}
273-
deviceId={deviceId}
274-
>
275-
<PixelsProvider>
276-
<PushNotificationContextProvider>
277-
<SubscriptionContextProvider>
278-
<PostReferrerContextProvider>
279-
<InternalApp {...props} />
280-
</PostReferrerContextProvider>
281-
</SubscriptionContextProvider>
282-
</PushNotificationContextProvider>
283-
</PixelsProvider>
284-
</BootDataProvider>
285-
<ReactQueryDevtools />
279+
<HydrationBoundary state={dehydratedState}>
280+
<BootDataProvider
281+
app={BootApp.Webapp}
282+
getRedirectUri={getRedirectUri}
283+
getPage={getPage}
284+
version={version}
285+
deviceId={deviceId}
286+
>
287+
<PixelsProvider>
288+
<PushNotificationContextProvider>
289+
<SubscriptionContextProvider>
290+
<PostReferrerContextProvider>
291+
<InternalApp {...props} />
292+
</PostReferrerContextProvider>
293+
</SubscriptionContextProvider>
294+
</PushNotificationContextProvider>
295+
</PixelsProvider>
296+
</BootDataProvider>
297+
<ReactQueryDevtools />
298+
</HydrationBoundary>
286299
</QueryClientProvider>
287300
</ProgressiveEnhancementContextProvider>
288301
);

‎packages/webapp/pages/helloworld/index.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@ import React, { useEffect, useCallback } from 'react';
33
import type { GetServerSideProps } from 'next';
44
import type { DehydratedState } from '@tanstack/react-query';
55
import Head from 'next/head';
6-
import {
7-
dehydrate,
8-
HydrationBoundary,
9-
QueryClient,
10-
} from '@tanstack/react-query';
6+
import { dehydrate, QueryClient } from '@tanstack/react-query';
117
import { BootApp } from '@dailydotdev/shared/src/lib/boot';
128
import {
139
FUNNEL_BOOT_QUERY_KEY,
@@ -79,7 +75,6 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async ({
7975
};
8076

8177
export default function HelloWorldPage({
82-
dehydratedState,
8378
initialStepId,
8479
showCookieBanner,
8580
}: PageProps): ReactElement {
@@ -111,7 +106,7 @@ export default function HelloWorldPage({
111106
}
112107

113108
return (
114-
<HydrationBoundary state={dehydratedState}>
109+
<>
115110
{/* <HotJarTracking hotjarId="6381877" /> */}
116111
<JotaiProvider>
117112
<Head>
@@ -129,6 +124,6 @@ export default function HelloWorldPage({
129124
)}
130125
<Toast autoDismissNotifications />
131126
</JotaiProvider>
132-
</HydrationBoundary>
127+
</>
133128
);
134129
}

‎packages/webapp/pages/onboarding.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,7 @@ import {
3737
import Toast from '@dailydotdev/shared/src/components/notifications/Toast';
3838
import type { GetServerSideProps } from 'next';
3939
import type { DehydratedState } from '@tanstack/react-query';
40-
import {
41-
dehydrate,
42-
HydrationBoundary,
43-
QueryClient,
44-
} from '@tanstack/react-query';
40+
import { dehydrate, QueryClient } from '@tanstack/react-query';
4541
import {
4642
FunnelBootFeatureKey,
4743
getFunnelBootData,
@@ -360,15 +356,12 @@ function Onboarding({ initialStepId }: PageProps): ReactElement {
360356
}
361357

362358
function Page(props: PageProps) {
363-
const { dehydratedState } = props;
364359
const { autoDismissNotifications } = useSettingsContext();
365360
return (
366-
<HydrationBoundary state={dehydratedState}>
367-
<JotaiProvider>
368-
<Onboarding {...props} />
369-
<Toast autoDismissNotifications={autoDismissNotifications} />
370-
</JotaiProvider>
371-
</HydrationBoundary>
361+
<JotaiProvider>
362+
<Onboarding {...props} />
363+
<Toast autoDismissNotifications={autoDismissNotifications} />
364+
</JotaiProvider>
372365
);
373366
}
374367

0 commit comments

Comments
 (0)