Factor out QueryProvider (#3331)

src/App.native.tsx

@@ -12,20 +12,16 @@ import {
 import * as SplashScreen from 'expo-splash-screen'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {init as initPersistedState} from '#/state/persisted'
 import * as persisted from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {useIntentHandler} from 'lib/hooks/useIntentHandler'
-import {useNotificationsListener} from 'lib/notifications/notifications'
 import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
-import {
-  asyncStoragePersister,
-  dehydrateOptions,
-  queryClient,
-} from 'lib/react-query'
+import {useNotificationsListener} from 'lib/notifications/notifications'
+import {QueryProvider} from 'lib/react-query'
 import {s} from 'lib/styles'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {Provider as DialogStateProvider} from 'state/dialogs'
@@ -58,8 +54,10 @@ SplashScreen.preventAutoHideAsync()
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()
   const {resumeSession} = useSessionApi()
+  const queryClient = useQueryClient()
   const theme = useColorModeTheme()
   const {_} = useLingui()
+
   useIntentHandler()
   useNotificationsListener(queryClient)
   useOTAUpdates()
@@ -123,9 +121,7 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <PersistQueryClientProvider
-      client={queryClient}
-      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
+    <QueryProvider>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>
@@ -147,7 +143,7 @@ function App() {
           </PrefsStateProvider>
         </ShellStateProvider>
       </SessionProvider>
-    </PersistQueryClientProvider>
+    </QueryProvider>
   )
 }
 

src/App.web.tsx

@@ -1,44 +1,38 @@
 import 'lib/sentry' // must be near top
-
-import React, {useState, useEffect} from 'react'
-import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
-import {SafeAreaProvider} from 'react-native-safe-area-context'
-import {RootSiblingParent} from 'react-native-root-siblings'
-
 import 'view/icons'
 
-import {ThemeProvider as Alf} from '#/alf'
-import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
+import React, {useEffect, useState} from 'react'
+import {RootSiblingParent} from 'react-native-root-siblings'
+import {SafeAreaProvider} from 'react-native-safe-area-context'
+
+import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 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,
-  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'
-import {Provider as LightboxStateProvider} from 'state/lightbox'
-import {Provider as MutedThreadsProvider} from 'state/muted-threads'
-import {Provider as InvitesStateProvider} from 'state/invites'
-import {Provider as PrefsStateProvider} from 'state/preferences'
-import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
-import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+import * as persisted from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
-import I18nProvider from './locale/i18nProvider'
+import {useIntentHandler} from 'lib/hooks/useIntentHandler'
+import {QueryProvider} from 'lib/react-query'
+import {ThemeProvider} from 'lib/ThemeContext'
+import {Provider as DialogStateProvider} from 'state/dialogs'
+import {Provider as InvitesStateProvider} from 'state/invites'
+import {Provider as LightboxStateProvider} from 'state/lightbox'
+import {Provider as ModalStateProvider} from 'state/modals'
+import {Provider as MutedThreadsProvider} from 'state/muted-threads'
+import {Provider as PrefsStateProvider} from 'state/preferences'
+import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import {
   Provider as SessionProvider,
   useSession,
   useSessionApi,
 } from 'state/session'
-import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
-import * as persisted from '#/state/persisted'
+import {Provider as ShellStateProvider} from 'state/shell'
+import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
+import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+import {ToastContainer} from 'view/com/util/Toast.web'
+import {Shell} from 'view/shell/index'
+import {ThemeProvider as Alf} from '#/alf'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as PortalProvider} from '#/components/Portal'
-import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
-import {useIntentHandler} from 'lib/hooks/useIntentHandler'
+import I18nProvider from './locale/i18nProvider'
 
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()
@@ -100,9 +94,7 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <PersistQueryClientProvider
-      client={queryClient}
-      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
+    <QueryProvider>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>
@@ -124,7 +116,7 @@ function App() {
           </PrefsStateProvider>
         </ShellStateProvider>
       </SessionProvider>
-    </PersistQueryClientProvider>
+    </QueryProvider>
   )
 }
 

src/lib/react-query.tsx

@@ -1,8 +1,12 @@
+import React from 'react'
 import {AppState, AppStateStatus} from 'react-native'
-import {QueryClient, focusManager} from '@tanstack/react-query'
-import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import {PersistQueryClientProviderProps} from '@tanstack/react-query-persist-client'
+import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
+import {focusManager, QueryClient} from '@tanstack/react-query'
+import {
+  PersistQueryClientProvider,
+  PersistQueryClientProviderProps,
+} from '@tanstack/react-query-persist-client'
 
 import {isNative} from '#/platform/detection'
 
@@ -35,7 +39,7 @@ focusManager.setEventListener(onFocus => {
   }
 })
 
-export const queryClient = new QueryClient({
+const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       // NOTE
@@ -56,15 +60,30 @@ export const queryClient = new QueryClient({
   },
 })
 
-export const asyncStoragePersister = createAsyncStoragePersister({
+const asyncStoragePersister = createAsyncStoragePersister({
   storage: AsyncStorage,
   key: 'queryCache',
 })
 
-export const dehydrateOptions: PersistQueryClientProviderProps['persistOptions']['dehydrateOptions'] =
+const dehydrateOptions: PersistQueryClientProviderProps['persistOptions']['dehydrateOptions'] =
   {
     shouldDehydrateMutation: (_: any) => false,
     shouldDehydrateQuery: query => {
       return STORED_CACHE_QUERY_KEYS.includes(String(query.queryKey[0]))
     },
   }
+
+const persistOptions = {
+  persister: asyncStoragePersister,
+  dehydrateOptions,
+}
+
+export function QueryProvider({children}: {children: React.ReactNode}) {
+  return (
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={persistOptions}>
+      {children}
+    </PersistQueryClientProvider>
+  )
+}