Skip to content

Commit

Permalink
Enable react-query devtools in prod
Browse files Browse the repository at this point in the history
  • Loading branch information
paulcretu committed Sep 10, 2024
1 parent 6cb8ca8 commit 486e762
Showing 1 changed file with 23 additions and 0 deletions.
23 changes: 23 additions & 0 deletions ui/src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { NextPage } from "next";
import type { AppProps } from "next/app";
import Head from "next/head";
import { ReactElement, ReactNode, useState } from "react";
import React from "react";
import ReactGA from "react-ga4";

import theme from "@/styles/theme";
Expand All @@ -28,6 +29,13 @@ if (GA_TRACKING_ID) {
ReactGA.initialize(GA_TRACKING_ID);
}

// From https://tanstack.com/query/latest/docs/framework/react/devtools#modern-bundlers
const ReactQueryDevtoolsProd = React.lazy(() =>
import("@tanstack/react-query-devtools/production").then((d) => ({
default: d.ReactQueryDevtools,
})),
);

// App needs to be customized in order to make MUI work with SSR
// https://mui.com/material-ui/integrations/nextjs/#pages-router
// https://github.com/mui/material-ui/blob/master/examples/material-ui-nextjs-pages-router-ts/pages/_app.tsx
Expand All @@ -51,6 +59,16 @@ export default function MyApp(props: AppPropsWithLayout) {
}),
);

// From https://tanstack.com/query/latest/docs/framework/react/devtools#devtools-in-production
const [showReactQueryDevtoolsProd, setShowReactQueryDevtoolsProd] =
React.useState(false);

React.useEffect(() => {
// @ts-expect-error toggleQueryDevtools doesn't exist on window
window.toggleQueryDevtools = () =>
setShowReactQueryDevtoolsProd((old) => !old);
}, []);

return (
<QueryClientProvider client={queryClient}>
<HydrationBoundary state={pageProps.dehydratedState}>
Expand All @@ -68,6 +86,11 @@ export default function MyApp(props: AppPropsWithLayout) {
</ThemeProvider>
</AppCacheProvider>
</HydrationBoundary>
{showReactQueryDevtoolsProd && (
<React.Suspense fallback={null}>
<ReactQueryDevtoolsProd />
</React.Suspense>
)}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
);
Expand Down

0 comments on commit 486e762

Please sign in to comment.