chore(sqllab): Refactor react-query by redux-toolkit query

superset-frontend/package.json

@@ -184,7 +184,6 @@
     "react-jsonschema-form": "^1.8.1",
     "react-lines-ellipsis": "^0.15.0",
     "react-loadable": "^5.5.0",
-    "react-query": "^3.39.2",
     "react-redux": "^7.2.8",
     "react-resize-detector": "^7.1.2",
     "react-reverse-portal": "^2.1.1",

superset-frontend/spec/helpers/testing-library.tsx

@@ -26,26 +26,38 @@ 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';
 import { configureStore, Store } from '@reduxjs/toolkit';
+import { api } from 'src/hooks/apiResources/queryApi';
 
 type Options = Omit<RenderOptions, 'queries'> & {
   useRedux?: boolean;
   useDnd?: boolean;
   useQueryParams?: boolean;
   useRouter?: boolean;
-  useQuery?: boolean;
   initialState?: {};
   reducers?: {};
   store?: Store;
 };
 
+const createStore = (initialState: object = {}, reducers: object = {}) =>
+  configureStore({
+    preloadedState: initialState,
+    reducer: {
+      ...reducers,
+      [api.reducerPath]: api.reducer,
+    },
+    middleware: getDefaultMiddleware =>
+      getDefaultMiddleware().concat(api.middleware),
+    devTools: false,
+  });
+
+export const defaultStore = createStore();
+
 export function createWrapper(options?: Options) {
   const {
     useDnd,
     useRedux,
     useQueryParams,
-    useQuery = true,
     useRouter,
     initialState,
     reducers,
@@ -63,13 +75,7 @@ export function createWrapper(options?: Options) {
 
     if (useRedux) {
       const mockStore =
-        store ??
-        configureStore({
-          preloadedState: initialState || {},
-          devTools: false,
-          reducer: reducers || reducerIndex,
-        });
-
+        store ?? createStore(initialState, reducers || reducerIndex);
       result = <Provider store={mockStore}>{result}</Provider>;
     }
 
@@ -81,10 +87,6 @@ export function createWrapper(options?: Options) {
       result = <BrowserRouter>{result}</BrowserRouter>;
     }
 
-    if (useQuery) {
-      result = <QueryProvider>{result}</QueryProvider>;
-    }
-
     return result;
   };
 }

superset-frontend/src/SqlLab/App.jsx

@@ -22,7 +22,6 @@ import { Provider } from 'react-redux';
 import { hot } from 'react-hot-loader/root';
 import { FeatureFlag, ThemeProvider } from '@superset-ui/core';
 import { GlobalStyles } from 'src/GlobalStyles';
-import QueryProvider from 'src/views/QueryProvider';
 import { initFeatureFlags, isFeatureEnabled } from 'src/featureFlags';
 import { setupStore } from 'src/views/store';
 import setupExtensions from 'src/setup/setupExtensions';
@@ -133,15 +132,13 @@ if (sqlLabMenu) {
 }
 
 const Application = () => (
-  <QueryProvider>
-    <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        <GlobalStyles />
-        <SqlLabGlobalStyles />
-        <App />
-      </ThemeProvider>
-    </Provider>
-  </QueryProvider>
+  <Provider store={store}>
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <SqlLabGlobalStyles />
+      <App />
+    </ThemeProvider>
+  </Provider>
 );
 
 export default hot(Application);