diff options
| -rw-r--r-- | src/App.native.tsx | 18 | ||||
| -rw-r--r-- | src/App.web.tsx | 50 | ||||
| -rw-r--r-- | src/lib/react-query.tsx (renamed from src/lib/react-query.ts) | 31 |
3 files changed, 53 insertions, 46 deletions
diff --git a/src/App.native.tsx b/src/App.native.tsx index 36944aa91..57ebe4951 100644 --- a/src/App.native.tsx +++ b/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> ) } diff --git a/src/App.web.tsx b/src/App.web.tsx index f47f763da..2910bbbae 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -1,44 +1,38 @@ import 'lib/sentry' // must be near top +import 'view/icons' -import React, {useState, useEffect} from 'react' -import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client' -import {SafeAreaProvider} from 'react-native-safe-area-context' +import React, {useEffect, useState} from 'react' import {RootSiblingParent} from 'react-native-root-siblings' +import {SafeAreaProvider} from 'react-native-safe-area-context' -import 'view/icons' - -import {ThemeProvider as Alf} from '#/alf' -import {useColorModeTheme} from '#/alf/util/useColorModeTheme' +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 * as persisted from '#/state/persisted' +import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs' +import {useIntentHandler} from 'lib/hooks/useIntentHandler' +import {QueryProvider} from 'lib/react-query' 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 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 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 {Provider as LabelDefsProvider} from '#/state/preferences/label-defs' -import I18nProvider from './locale/i18nProvider' +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> ) } diff --git a/src/lib/react-query.ts b/src/lib/react-query.tsx index d6cd3c54b..08b61ee20 100644 --- a/src/lib/react-query.ts +++ b/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> + ) +} |