chore: add cache for react query

kernelci · Jul 19, 2024 · 6bbd34d · 6bbd34d
1 parent d77eb43
commit 6bbd34d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 5 deletions.
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -20,16 +20,18 @@
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.15.20",
     "@mui/x-charts": "^7.7.1",
-    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
+    "@tanstack/query-sync-storage-persister": "^5.51.9",
     "@tanstack/react-query": "^5.45.1",
+    "@tanstack/react-query-persist-client": "^5.51.9",
     "@tanstack/react-table": "^8.17.3",
     "@vitejs/plugin-react": "^4.3.1",
     "axios": "^1.7.2",

diff --git a/dashboard/pnpm-lock.yaml b/dashboard/pnpm-lock.yaml
diff --git a/dashboard/src/main.tsx b/dashboard/src/main.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
 
 import { IntlProvider } from 'react-intl';
 
 import { flatten } from 'flat';
 
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
+
 import { messages } from './locales/messages/index';
 import { LOCALES } from './locales/constants';
 
@@ -15,7 +19,20 @@ import Root from './routes/Root/Root';
 import Trees from './routes/Trees/Trees';
 import TreeDetails from './routes/TreeDetails/TreeDetails';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // eslint-disable-next-line no-magic-numbers
+      gcTime: 1000 * 60 * 30, // 30 minutes,
+      // eslint-disable-next-line no-magic-numbers
+      staleTime: 1000 * 60 * 30, // 30 minutes,
+    },
+  },
+});
+
+const persister = createSyncStoragePersister({
+  storage: window.localStorage,
+});
 
 const router = createBrowserRouter([
   {
@@ -36,10 +53,13 @@ const router = createBrowserRouter([
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister }}
+    >
       <IntlProvider messages={flatten(messages[LOCALES.EN_US])} locale="en">
         <RouterProvider router={router} />
       </IntlProvider>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   </React.StrictMode>,
 );