add persisting of static data

app/components/sheets/RoutesList.tsx

@@ -11,6 +11,7 @@ import SheetHeader from "../ui/SheetHeader";
 import IconPill from "../ui/IconPill";
 import { useAuthToken, useBaseData, usePatternPaths, useRoutes } from "app/data/api_query";
 import { useDefaultRouteGroup, useFavorites } from "app/data/storage_query";
+import { useQueryClient } from "@tanstack/react-query";
 
 interface SheetProps {
     sheetRef: React.RefObject<BottomSheetModal>
@@ -30,7 +31,8 @@ const RoutesList: React.FC<SheetProps> = ({ sheetRef }) => {
 
     const [shouldUpdateData, setShouldUpdateData] = useState(false);
 
-    const { data: routes, isLoading: isRoutesLoading } = useRoutes();
+    const queryClient = useQueryClient();
+    const { data: routes, isLoading: isRoutesLoading, isRefetching: isRefreshing } = useRoutes();
     const { data: favorites, isLoading: isFavoritesLoading, isError: isFavoritesError } = useFavorites(shouldUpdateData);
     const { data: defaultGroup, refetch: refetchDefaultGroup } = useDefaultRouteGroup(shouldUpdateData);
 
@@ -161,6 +163,12 @@ const RoutesList: React.FC<SheetProps> = ({ sheetRef }) => {
                 data={filterRoutes()}
                 keyExtractor={(route: IMapRoute) => route.key}
                 style={{ marginLeft: 16 }}
+                refreshing={isRefreshing}
+                onRefresh={() => {
+                    queryClient.invalidateQueries({ queryKey: ["baseData"] });
+                    queryClient.invalidateQueries({ queryKey: ["patternPaths"] });
+                    queryClient.invalidateQueries({ queryKey: ["routes"] });
+                }}
                 renderItem={({item: route}) => {
                     return (
                         <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 8 }} onPress={() => handleRouteSelected(route)}>

app/data/api_query.ts

@@ -12,7 +12,7 @@ export const useAuthToken = () => {
         queryFn: async () => {
             return await getAuthentication();
         },
-        staleTime: Infinity
+        staleTime: 2 * 3600 * 1000, // keep for 2 hours
     });
 
     return query;
@@ -36,7 +36,10 @@ export const useBaseData = () => {
             return baseData;
         },
         enabled: authTokenQuery.isSuccess,
-        staleTime: Infinity,
+        staleTime: 8 * 3600 * 1000, // persist for 8 hours
+        meta: {
+            persist: true
+        }
     });
 
     return query;
@@ -58,7 +61,10 @@ export const usePatternPaths = () => {
             return patternPaths;
         },
         enabled: baseDataQuery.isSuccess,
-        staleTime: Infinity
+        staleTime: 8 * 3600 * 1000, // persist for 8 hours
+        meta: {
+            persist: true
+        }
     });
 
     return query
@@ -99,7 +105,10 @@ export const useRoutes = () => {
             return routes;
         },
         enabled: patternPathsQuery.isSuccess && baseDataQuery.isSuccess,
-        staleTime: Infinity
+        staleTime: 8 * 3600 * 1000, // persist for 8 hours
+        meta: {
+            persist: true
+        }
     });
 
     return query;

app/data/storage_query.ts

@@ -88,7 +88,6 @@ export const addFavoriteMutation = () => {
         },
         onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: ["favorites"] });
-            queryClient.invalidateQueries({ queryKey: ["favorite"] });
         }
     });
 

app/index.tsx

@@ -11,10 +11,13 @@ import StopTimetable from './components/sheets/StopTimetable';
 import Settings from './components/sheets/Settings';
 import { darkMode, lightMode } from './theme';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Query, QueryClient } from '@tanstack/react-query';
 import { getColorScheme } from './utils';
 import InputRoute from './components/sheets/route_planning/InputRoute';
 import TripPlanDetail from './components/sheets/route_planning/TripPlanDetail';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 
 const Home = () => {
     const setPresentSheet = useAppStore((state) => state.setPresentSheet);
@@ -73,9 +76,23 @@ const Home = () => {
     }, [])
 
     const queryClient = new QueryClient()
+    const asyncStoragePersister = createAsyncStoragePersister({
+        storage: AsyncStorage,
+    })
 
     return (
-        <QueryClientProvider client={queryClient}>
+        <PersistQueryClientProvider 
+            client={queryClient}
+            persistOptions={{
+                persister: asyncStoragePersister,
+                dehydrateOptions: {
+                    shouldDehydrateQuery: (query: Query): boolean => {
+                        // only persist queries who ask for it and are successful
+                        return query.meta?.persist as boolean && query.state.status === 'success'
+                    },
+                }
+            }}
+        >
             <GestureHandlerRootView style={{ flex: 1 }}>
                 <BottomSheetModalProvider>
                     <View style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -96,7 +113,7 @@ const Home = () => {
                     </View>
                 </BottomSheetModalProvider>
             </GestureHandlerRootView>
-        </QueryClientProvider>
+        </PersistQueryClientProvider>
     )
 }
 

package.json

@@ -20,7 +20,9 @@
     "@gorhom/bottom-sheet": "^4.6.4",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-segmented-control/segmented-control": "2.5.2",
+    "@tanstack/query-async-storage-persister": "^5.53.1",
     "@tanstack/react-query": "^5.22.2",
+    "@tanstack/react-query-persist-client": "^5.53.1",
     "aggie-spirit-api": "^1.1.0",
     "expo": "^51.0.31",
     "expo-constants": "~16.0.2",