feat: enable toggle for react query devtools

openedx · May 22, 2024 · 1a463d9 · 1a463d9
1 parent 9f442ff
commit 1a463d9
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/components/App/index.jsx b/src/components/App/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   Route, Navigate, Routes, generatePath, useParams,
 } from 'react-router-dom';
@@ -60,6 +60,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 +95,11 @@ const AppWrapper = () => {
     }
     return true;
   }, [config]);
-
+  const ReactQueryDevtoolsProduction = ReactQueryDevtools;
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools />
+      {showReactQueryDevtools && <ReactQueryDevtoolsProduction />}
       <AppProvider store={store}>
         <Helmet
           titleTemplate="%s - edX Admin Portal"