refactor: introduce react-query on api resource hook (#21240)

apache · Sep 1, 2022 · 65a11b6 · 65a11b6
1 parent 1aeb8fd
commit 65a11b6
Show file tree

Hide file tree

Showing 13 changed files with 561 additions and 117 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -175,6 +175,7 @@
     "react-lines-ellipsis": "^0.15.0",
     "react-loadable": "^5.5.0",
     "react-markdown": "^4.3.1",
+    "react-query": "^3.39.2",
     "react-redux": "^7.2.0",
     "react-resize-detector": "^6.7.6",
     "react-reverse-portal": "^2.0.1",

diff --git a/superset-frontend/spec/helpers/testing-library.tsx b/superset-frontend/spec/helpers/testing-library.tsx
@@ -34,12 +34,14 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import reducerIndex from 'spec/helpers/reducerIndex';
 import { QueryParamProvider } from 'use-query-params';
+import QueryProvider from 'src/views/QueryProvider';
 
 type Options = Omit<RenderOptions, 'queries'> & {
   useRedux?: boolean;
   useDnd?: boolean;
   useQueryParams?: boolean;
   useRouter?: boolean;
+  useQuery?: boolean;
   initialState?: {};
   reducers?: {};
   store?: Store;
@@ -50,6 +52,7 @@ function createWrapper(options?: Options) {
     useDnd,
     useRedux,
     useQueryParams,
+    useQuery = true,
     useRouter,
     initialState,
     reducers,
@@ -85,6 +88,10 @@ function createWrapper(options?: Options) {
       result = <BrowserRouter>{result}</BrowserRouter>;
     }
 
+    if (useQuery) {
+      result = <QueryProvider>{result}</QueryProvider>;
+    }
+
     return result;
   };
 }

diff --git a/superset-frontend/src/SqlLab/App.jsx b/superset-frontend/src/SqlLab/App.jsx
@@ -23,6 +23,7 @@ import thunkMiddleware from 'redux-thunk';
 import { hot } from 'react-hot-loader/root';
 import { ThemeProvider } from '@superset-ui/core';
 import { GlobalStyles } from 'src/GlobalStyles';
+import QueryProvider from 'src/views/QueryProvider';
 import {
   initFeatureFlags,
   isFeatureEnabled,
@@ -134,12 +135,14 @@ if (sqlLabMenu) {
 }
 
 const Application = () => (
-  <Provider store={store}>
-    <ThemeProvider theme={theme}>
-      <GlobalStyles />
-      <App />
-    </ThemeProvider>
-  </Provider>
+  <QueryProvider>
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <GlobalStyles />
+        <App />
+      </ThemeProvider>
+    </Provider>
+  </QueryProvider>
 );
 
 export default hot(Application);
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
@@ -31,6 +31,7 @@ import {
 import AceEditorWrapper from 'src/SqlLab/components/AceEditorWrapper';
 import ConnectedSouthPane from 'src/SqlLab/components/SouthPane/state';
 import SqlEditor from 'src/SqlLab/components/SqlEditor';
+import QueryProvider from 'src/views/QueryProvider';
 import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
 import { AntdDropdown } from 'src/components';
 import {
@@ -101,9 +102,11 @@ describe('SqlEditor', () => {
 
   const buildWrapper = (props = {}) =>
     mount(
-      <Provider store={store}>
-        <SqlEditor {...mockedProps} {...props} />
-      </Provider>,
+      <QueryProvider>
+        <Provider store={store}>
+          <SqlEditor {...mockedProps} {...props} />
+        </Provider>
+      </QueryProvider>,
       {
         wrappingComponent: ThemeProvider,
         wrappingComponentProps: { theme: supersetTheme },

diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/TabbedSqlEditors.test.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/TabbedSqlEditors.test.jsx
@@ -31,6 +31,7 @@ import TabbedSqlEditors from 'src/SqlLab/components/TabbedSqlEditors';
 import SqlEditor from 'src/SqlLab/components/SqlEditor';
 import { table, initialState } from 'src/SqlLab/fixtures';
 import { newQueryTabName } from 'src/SqlLab/utils/newQueryTabName';
+import QueryProvider from 'src/views/QueryProvider';
 
 fetchMock.get('glob:*/api/v1/database/*', {});
 fetchMock.get('glob:*/savedqueryviewapi/api/get/*', {});
@@ -89,9 +90,11 @@ describe('TabbedSqlEditors', () => {
   const mountWithAct = async () =>
     act(async () => {
       mount(
-        <Provider store={store}>
-          <TabbedSqlEditors {...mockedProps} />
-        </Provider>,
+        <QueryProvider>
+          <Provider store={store}>
+            <TabbedSqlEditors {...mockedProps} />
+          </Provider>
+        </QueryProvider>,
         {
           wrappingComponent: ThemeProvider,
           wrappingComponentProps: { theme: supersetTheme },

diff --git a/superset-frontend/src/components/Datasource/DatasourceModal.test.jsx b/superset-frontend/src/components/Datasource/DatasourceModal.test.jsx
@@ -32,6 +32,7 @@ import { DatasourceModal } from 'src/components/Datasource';
 import DatasourceEditor from 'src/components/Datasource/DatasourceEditor';
 import * as featureFlags from 'src/featureFlags';
 import mockDatasource from 'spec/fixtures/mockDatasource';
+import QueryProvider from 'src/views/QueryProvider';
 
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
@@ -53,9 +54,11 @@ const mockedProps = {
 
 async function mountAndWait(props = mockedProps) {
   const mounted = mount(
-    <Provider store={store}>
-      <DatasourceModal {...props} />
-    </Provider>,
+    <QueryProvider>
+      <Provider store={store}>
+        <DatasourceModal {...props} />
+      </Provider>
+    </QueryProvider>,
     {
       wrappingComponent: ThemeProvider,
       wrappingComponentProps: { theme: supersetTheme },