perf: upgrade react query and use local storage persistor (#750)

package.json

@@ -12,6 +12,9 @@
     "@mui/material": "^5.15.14",
     "@mui/x-date-pickers": "^7.1.0",
     "@mui/x-tree-view": "^6.17.0",
+    "@tanstack/query-sync-storage-persister": "^5.36.0",
+    "@tanstack/react-query": "^5.36.0",
+    "@tanstack/react-query-persist-client": "^5.36.0",
     "@types/git-username": "^1.0.5",
     "@types/leaflet.markercluster": "^1.5.2",
     "@vitejs/plugin-react-swc": "^3.6.0",
@@ -37,7 +40,6 @@
     "react-i18next": "^14.1.0",
     "react-leaflet": "^4.0.1",
     "react-leaflet-cluster": "^2.1.0",
-    "react-query": "^3.39.3",
     "react-router-dom": "^6.22.3",
     "recharts": "^2.12.6",
     "sass": "^1.72.0",

src/api/groupByService.ts

@@ -1,7 +1,7 @@
 import { BASE_PATH } from './apiConfig'
 import agencyList from 'open-bus-stride-client/agencies/agencyList'
 import { Moment } from 'moment'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 
 type groupByField =
   | 'gtfs_route_date'
@@ -64,17 +64,15 @@ export type GroupByRes = Replace<
 >
 
 async function fetchGroupBy({
-  dateTo,
-  dateFrom,
+  dateToStr,
+  dateFromStr,
   groupBy,
 }: {
-  dateTo: Moment
-  dateFrom: Moment
+  dateToStr: string
+  dateFromStr: string
   groupBy: groupByFields
 }): Promise<GroupByRes[]> {
   // example: https://open-bus-stride-api.hasadna.org.il/gtfs_rides_agg/group_by?date_from=2023-01-27&date_to=2023-01-29&group_by=operator_ref
-  const dateToStr = dateTo.toISOString().split('T')[0]
-  const dateFromStr = dateFrom.toISOString().split('T')[0]
   const excludes = 'exclude_hour_from=23&exclude_hour_to=2'
 
   const response = await fetch(
@@ -102,10 +100,12 @@ export function useGroupBy({
   dateFrom: Moment
   groupBy: groupByFields
 }) {
-  const { isLoading, isError, data, error } = useQuery(
-    ['groupBy', dateFrom.toISOString(), dateTo.toISOString(), groupBy],
-    () => fetchGroupBy({ dateTo, dateFrom, groupBy }),
-  )
+  const dateToStr = dateTo.toISOString().split('T')[0]
+  const dateFromStr = dateFrom.toISOString().split('T')[0]
+  const { isLoading, isError, data, error } = useQuery({
+    queryKey: ['groupBy', dateToStr, dateFromStr, groupBy],
+    queryFn: () => fetchGroupBy({ dateToStr, dateFromStr, groupBy }),
+  })
 
   return [data ? data : [], isLoading, isError ? error : null] as const
 }

src/index.tsx

@@ -4,16 +4,33 @@ import './index.css'
 import App from './App'
 import ReactGA from 'react-ga4'
 import './locale/allTranslations'
-import { QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient } from '@tanstack/react-query'
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+
+const persister = createSyncStoragePersister({
+  storage: window.localStorage,
+})
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: Infinity,
+      staleTime: 1000 * 60 * 60 * 24, // 24 hours
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+})
 
 ReactGA.initialize('G-0YRQT80GG1')
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
-const client = new QueryClient()
 root.render(
   <React.StrictMode>
-    <QueryClientProvider client={client}>
+    <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
       <App />
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   </React.StrictMode>,
 )