Disable refetch for reactQueries (airbytehq#11200)

roelsadza · Mar 18, 2022 · b9720d1 · b9720d1
1 parent ca8022f
commit b9720d1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 52 deletions.
diff --git a/airbyte-webapp/src/App.tsx b/airbyte-webapp/src/App.tsx
@@ -1,8 +1,6 @@
 import React, { Suspense } from "react";
 import { ThemeProvider } from "styled-components";
 import { IntlProvider } from "react-intl";
-import { CacheProvider } from "rest-hooks";
-import { QueryClient, QueryClientProvider } from "react-query";
 import { BrowserRouter as Router } from "react-router-dom";
 
 import en from "./locales/en.json";
@@ -26,6 +24,7 @@ import {
   windowConfigProvider,
 } from "./config";
 import { WorkspaceServiceProvider } from "./services/workspaces/WorkspacesService";
+import { StoreProvider } from "views/common/StoreProvider";
 
 const StyleProvider: React.FC = ({ children }) => (
   <ThemeProvider theme={theme}>
@@ -46,20 +45,6 @@ const I18NProvider: React.FC = ({ children }) => (
   </IntlProvider>
 );
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      suspense: true,
-    },
-  },
-});
-
-const StoreProvider: React.FC = ({ children }) => (
-  <CacheProvider>
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  </CacheProvider>
-);
-
 const configProviders: ValueProvider<Config> = [
   envConfigProvider,
   windowConfigProvider,

diff --git a/airbyte-webapp/src/packages/cloud/App.tsx b/airbyte-webapp/src/packages/cloud/App.tsx
@@ -1,9 +1,7 @@
 import React, { Suspense } from "react";
 import { ThemeProvider } from "styled-components";
 import { IntlProvider } from "react-intl";
-import { CacheProvider } from "rest-hooks";
 import { BrowserRouter as Router } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "react-query";
 
 import en from "locales/en.json";
 import cloudLocales from "packages/cloud/locales/en.json";
@@ -20,6 +18,7 @@ import { AuthenticationProvider } from "packages/cloud/services/auth/AuthService
 import { AppServicesProvider } from "./services/AppServicesProvider";
 import { IntercomProvider } from "./services/thirdParty/intercom/IntercomProvider";
 import { ConfigProvider } from "./services/ConfigProvider";
+import { StoreProvider } from "views/common/StoreProvider";
 
 const messages = Object.assign({}, en, cloudLocales);
 
@@ -42,36 +41,20 @@ const StyleProvider: React.FC = ({ children }) => (
   </ThemeProvider>
 );
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      suspense: true,
-    },
-  },
-});
-
-const StoreProvider: React.FC = ({ children }) => (
-  <CacheProvider>
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  </CacheProvider>
-);
-
 const Services: React.FC = ({ children }) => (
-  <ConfigProvider>
-    <AnalyticsProvider>
-      <ApiErrorBoundary>
-        <NotificationServiceProvider>
-          <FeatureService>
-            <AppServicesProvider>
-              <AuthenticationProvider>
-                <IntercomProvider>{children}</IntercomProvider>
-              </AuthenticationProvider>
-            </AppServicesProvider>
-          </FeatureService>
-        </NotificationServiceProvider>
-      </ApiErrorBoundary>
-    </AnalyticsProvider>
-  </ConfigProvider>
+  <AnalyticsProvider>
+    <ApiErrorBoundary>
+      <NotificationServiceProvider>
+        <FeatureService>
+          <AppServicesProvider>
+            <AuthenticationProvider>
+              <IntercomProvider>{children}</IntercomProvider>
+            </AuthenticationProvider>
+          </AppServicesProvider>
+        </FeatureService>
+      </NotificationServiceProvider>
+    </ApiErrorBoundary>
+  </AnalyticsProvider>
 );
 
 const App: React.FC = () => {
@@ -81,11 +64,13 @@ const App: React.FC = () => {
         <I18NProvider>
           <StoreProvider>
             <Suspense fallback={<LoadingPage />}>
-              <Router>
-                <Services>
-                  <Routing />
-                </Services>
-              </Router>
+              <ConfigProvider>
+                <Router>
+                  <Services>
+                    <Routing />
+                  </Services>
+                </Router>
+              </ConfigProvider>
             </Suspense>
           </StoreProvider>
         </I18NProvider>

diff --git a/airbyte-webapp/src/views/common/StoreProvider.tsx b/airbyte-webapp/src/views/common/StoreProvider.tsx
@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from "react-query";
+import React from "react";
+import { CacheProvider } from "rest-hooks";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      suspense: true,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
+const StoreProvider: React.FC = ({ children }) => (
+  <CacheProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  </CacheProvider>
+);
+
+export { StoreProvider };