11import { QueryClient , QueryClientProvider } from "react-query" ;
2- import type { FC , ReactNode } from "react" ;
2+ import { type FC , type ReactNode , useEffect , useState } from "react" ;
33import { HelmetProvider } from "react-helmet-async" ;
44import { AppRouter } from "./AppRouter" ;
55import { ThemeProvider } from "./contexts/ThemeProvider" ;
66import { AuthProvider } from "./contexts/AuthProvider/AuthProvider" ;
77import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary" ;
88import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar" ;
99import "./theme/globalFonts" ;
10+ import { ReactQueryDevtools } from "@tanstack/react-query-devtools" ;
1011
1112const defaultQueryClient = new QueryClient ( {
1213defaultOptions :{
@@ -22,10 +23,25 @@ interface AppProvidersProps {
2223queryClient ?:QueryClient ;
2324}
2425
26+ // extending the global window interface so we can conditionally
27+ // show our react query devtools
28+ declare global{
29+ interface Window {
30+ toggleDevtools :( ) => void ;
31+ }
32+ }
33+
2534export const AppProviders :FC < AppProvidersProps > = ( {
2635 children,
2736 queryClient= defaultQueryClient ,
2837} ) => {
38+ // https://tanstack.com/query/v4/docs/react/devtools
39+ const [ showDevtools , setShowDevtools ] = useState ( false ) ;
40+ useEffect ( ( ) => {
41+ window . toggleDevtools = ( ) => setShowDevtools ( ( old ) => ! old ) ;
42+ // eslint-disable-next-line react-hooks/exhaustive-deps -- no dependencies needed here
43+ } , [ ] ) ;
44+
2945return (
3046< HelmetProvider >
3147< QueryClientProvider client = { queryClient } >
@@ -35,6 +51,7 @@ export const AppProviders: FC<AppProvidersProps> = ({
3551< GlobalSnackbar />
3652</ ThemeProvider >
3753</ AuthProvider >
54+ { showDevtools && < ReactQueryDevtools initialIsOpen = { showDevtools } /> }
3855</ QueryClientProvider >
3956</ HelmetProvider >
4057) ;