feat(dashboard): refactor asset description sdk calls to use tanstack

awslabs · May 25, 2023 · f99bcde · f99bcde
1 parent df69e03
commit f99bcde
Show file tree

Hide file tree

Showing 12 changed files with 371 additions and 117 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -54,6 +54,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@tanstack/eslint-plugin-query": "^4.29.0",
+    "@tanstack/react-query-devtools": "^4.29.5",
     "@types/is-hotkey": "^0.1.7",
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.16.14",
@@ -101,6 +103,7 @@
     "@iot-app-kit/react-components": "5.8.1",
     "@iot-app-kit/source-iotsitewise": "5.8.1",
     "@popperjs/core": "^2.11.7",
+    "@tanstack/react-query": "^4.29.5",
     "buffer": "^6.0.3",
     "is-hotkey": "^0.2.0",
     "parse-duration": "^1.0.3",

diff --git a/packages/dashboard/src/components/dashboard/index.tsx b/packages/dashboard/src/components/dashboard/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { DndProvider } from 'react-dnd';
 import { TouchBackend } from 'react-dnd-touch-backend';
+import { QueryClientProvider } from '@tanstack/react-query';
 
 import InternalDashboard from '../internalDashboard';
 
@@ -17,6 +18,7 @@ import { getQueries } from './getQueries';
 
 import '@cloudscape-design/global-styles/index.css';
 import '../../styles/variables.css';
+import { queryClient } from '~/data/query-client';
 
 setupDashboardPlugins(plugins);
 
@@ -37,17 +39,19 @@ const Dashboard: React.FC<DashboardProperties> = ({
   return (
     <ClientContext.Provider value={getClients(clientConfiguration)}>
       <QueryContext.Provider value={getQueries(clientConfiguration)}>
-        <Provider store={configureDashboardStore({ ...toDashboardState(dashboardConfiguration), readOnly })}>
-          <DndProvider
-            backend={TouchBackend}
-            options={{
-              enableMouseEvents: true,
-              enableKeyboardEvents: true,
-            }}
-          >
-            <InternalDashboard onSave={onSave} editable={true} />
-          </DndProvider>
-        </Provider>
+        <QueryClientProvider client={queryClient}>
+          <Provider store={configureDashboardStore({ ...toDashboardState(dashboardConfiguration), readOnly })}>
+            <DndProvider
+              backend={TouchBackend}
+              options={{
+                enableMouseEvents: true,
+                enableKeyboardEvents: true,
+              }}
+            >
+              <InternalDashboard onSave={onSave} editable={true} />
+            </DndProvider>
+          </Provider>
+        </QueryClientProvider>
       </QueryContext.Provider>
     </ClientContext.Provider>
   );