Stockage persistent des requêtes

client/app/_layout.tsx

@@ -3,7 +3,10 @@ import { Stack, useNavigationContainerRef } from 'expo-router'
 import { StatusBar } from 'expo-status-bar'
 import { Provider as StoreProvider } from 'react-redux'
 import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { QueryClient } from '@tanstack/react-query'
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
 import { useReactNavigationDevTools } from '@dev-plugins/react-navigation'
 import { useReactQueryDevTools } from '@dev-plugins/react-query'
 import { useColorScheme } from '@/hooks/useColorScheme'
@@ -12,7 +15,15 @@ import { useStartBackgroundFetchServiceEffect } from '@/utils/background'
 import { useStartGeolocationServiceEffect } from '@/utils/geolocation'
 import LoginProvider from '@/components/LoginProvider'
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 24 * 60 * 60 * 1000,  // 24h
+      staleTime: 2000,
+      retry: 5,
+    }
+  }
+})
 
 export default function RootLayout() {
   useStartGeolocationServiceEffect()
@@ -21,12 +32,18 @@ export default function RootLayout() {
 
   const navigationRef = useNavigationContainerRef()
   useReactNavigationDevTools(navigationRef)
-
   useReactQueryDevTools(queryClient)
 
+  const asyncStoragePersister = createAsyncStoragePersister({
+    storage: AsyncStorage,
+  })  
+
   return (
     <StoreProvider store={store}>
-      <QueryClientProvider client={queryClient}>
+      <PersistQueryClientProvider
+          client={queryClient}
+          persistOptions={{ persister: asyncStoragePersister }}
+          onSuccess={() => queryClient.resumePausedMutations().then(() => queryClient.invalidateQueries())}>
         <LoginProvider loginRedirect={'/login'}>
           <PaperProvider theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}>
             <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
@@ -39,7 +56,7 @@ export default function RootLayout() {
             </ThemeProvider>
           </PaperProvider>
         </LoginProvider>
-      </QueryClientProvider>
+      </PersistQueryClientProvider>
     </StoreProvider>
   )
 }