From f3ee5ea38f4a7232a9bacb9fcfef2a4799611808 Mon Sep 17 00:00:00 2001
From: Hamzah Ullah <hamzahullah@yahoo.com>
Date: Wed, 22 May 2024 12:56:33 -0400
Subject: [PATCH] feat: enable toggle for react query devtools (#1233)

* feat: enable toggle for react query devtools

* chore: PR feedback
---
 src/components/App/index.jsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/App/index.jsx b/src/components/App/index.jsx
index 244f54c061..abdba6fe6f 100644
--- a/src/components/App/index.jsx
+++ b/src/components/App/index.jsx
@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo } from 'react';
+import React, {
+  lazy,
+  Suspense,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   Route, Navigate, Routes, generatePath, useParams,
 } from 'react-router-dom';
@@ -28,6 +34,11 @@ import store from '../../data/store';
 import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
 import { defaultQueryClientRetryHandler, queryCacheOnErrorHandler } from '../../utils';
 
+// eslint-disable-next-line import/no-unresolved
+const ReactQueryDevtoolsProduction = lazy(() => import('@tanstack/react-query-devtools/production').then((d) => ({
+  default: d.ReactQueryDevtools,
+})));
+
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: queryCacheOnErrorHandler,
@@ -60,6 +71,11 @@ const AppWrapper = () => {
   const apiClient = getAuthenticatedHttpClient();
   const config = getConfig();
 
+  const [showReactQueryDevtools, setShowReactQueryDevtools] = useState(false);
+  useEffect(() => {
+    window.toggleReactQueryDevtools = () => setShowReactQueryDevtools((prevState) => !prevState);
+  });
+
   useEffect(() => {
     if (process.env.HOTJAR_APP_ID) {
       try {
@@ -90,10 +106,14 @@ const AppWrapper = () => {
     }
     return true;
   }, [config]);
-
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools />
+      {showReactQueryDevtools && (
+        <Suspense fallback={null}>
+          <ReactQueryDevtoolsProduction />
+        </Suspense>
+      )}
       <AppProvider store={store}>
         <Helmet
           titleTemplate="%s - edX Admin Portal"