Add asyncstorage query persistence

src/App.native.tsx

@@ -5,7 +5,7 @@ import React, {useState, useEffect} from 'react'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import * as SplashScreen from 'expo-splash-screen'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
-import {QueryClientProvider} from '@tanstack/react-query'
+import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
 import {
   SafeAreaProvider,
   initialWindowMetrics,
@@ -22,7 +22,11 @@ import {s} from 'lib/styles'
 import {Shell} from 'view/shell'
 import * as notifications from 'lib/notifications/notifications'
 import * as Toast from 'view/com/util/Toast'
-import {queryClient} from 'lib/react-query'
+import {
+  queryClient,
+  asyncStoragePersister,
+  dehydrateOptions,
+} from 'lib/react-query'
 import {TestCtrls} from 'view/com/testing/TestCtrls'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as ModalStateProvider} from 'state/modals'
@@ -110,7 +114,9 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>
@@ -132,7 +138,7 @@ function App() {
           </PrefsStateProvider>
         </ShellStateProvider>
       </SessionProvider>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   )
 }
 

src/App.web.tsx

@@ -1,7 +1,7 @@
 import 'lib/sentry' // must be near top
 
 import React, {useState, useEffect} from 'react'
-import {QueryClientProvider} from '@tanstack/react-query'
+import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {RootSiblingParent} from 'react-native-root-siblings'
 
@@ -13,7 +13,11 @@ import {init as initPersistedState} from '#/state/persisted'
 import {Shell} from 'view/shell/index'
 import {ToastContainer} from 'view/com/util/Toast.web'
 import {ThemeProvider} from 'lib/ThemeContext'
-import {queryClient} from 'lib/react-query'
+import {
+  queryClient,
+  asyncStoragePersister,
+  dehydrateOptions,
+} from 'lib/react-query'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as ModalStateProvider} from 'state/modals'
 import {Provider as DialogStateProvider} from 'state/dialogs'
@@ -88,7 +92,9 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>
@@ -110,7 +116,7 @@ function App() {
           </PrefsStateProvider>
         </ShellStateProvider>
       </SessionProvider>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   )
 }
 

src/lib/react-query.ts

@@ -1,6 +1,11 @@
 import {AppState, AppStateStatus} from 'react-native'
-import {QueryClient, focusManager} from '@tanstack/react-query'
+import {QueryClient, focusManager, Query} from '@tanstack/react-query'
 import {isNative} from '#/platform/detection'
+import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+
+// any query keys in this array will be persisted to AsyncStorage
+const STORED_CACHE_QUERY_KEYS = ['labelers-detailed-info']
 
 focusManager.setEventListener(onFocus => {
   if (isNative) {
@@ -48,3 +53,17 @@ export const queryClient = new QueryClient({
     },
   },
 })
+
+export const asyncStoragePersister = createAsyncStoragePersister({
+  storage: AsyncStorage,
+  key: 'queryCache',
+})
+
+export const dehydrateOptions = {
+  shouldDehydrateMutation: (_: any) => false,
+  shouldDehydrateQuery: (query: any) => {
+    // something is wrong with useQuery's exported types, so we have to coerce here
+    const q = query as Query
+    return STORED_CACHE_QUERY_KEYS.includes(String(q.queryKey[0]))
+  },
+}

src/state/queries/labeler.ts

@@ -6,7 +6,10 @@ import {getAgent} from '#/state/session'
 import {preferencesQueryKey} from '#/state/queries/preferences'
 
 export const labelerInfoQueryKey = (did: string) => ['labeler-info', did]
-export const labelersInfoQueryKey = (dids: string[]) => ['labelers-info', dids]
+export const labelersInfoQueryKey = (dids: string[]) => [
+  'labelers-info',
+  dids.sort(),
+]
 export const labelersDetailedInfoQueryKey = (dids: string[]) => [
   'labelers-detailed-info',
   dids,
@@ -47,6 +50,7 @@ export function useLabelersDetailedInfoQuery({dids}: {dids: string[]}) {
   return useQuery({
     enabled: !!dids.length,
     queryKey: labelersDetailedInfoQueryKey(dids),
+    gcTime: 1000 * 60 * 60 * 6, // 6 hours
     queryFn: async () => {
       const res = await getAgent().app.bsky.labeler.getServices({
         dids,