diff --git a/template/src/hooks/use-invalidate-queries-on-language-change.ts b/template/src/hooks/use-invalidate-queries-on-language-change.ts new file mode 100644 index 0000000..f6e5565 --- /dev/null +++ b/template/src/hooks/use-invalidate-queries-on-language-change.ts @@ -0,0 +1,21 @@ +import { useQueryClient } from '@tanstack/react-query'; +import { useEffect, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; + +export function useInvalidateQueriesOnLanguageChange() { + const { i18n } = useTranslation(); + const languageRef = useRef(i18n.language); + const queryClient = useQueryClient(); + + useEffect(() => { + if (i18n.language === languageRef.current) { + return; + } + + // Evict everything from the cache but don't refetch anything. Queries will + // be refetched when they become "enabled" when their screen gains focus. + queryClient.invalidateQueries({ + refetchType: 'none', + }); + }, [queryClient, i18n.language]); +} diff --git a/template/src/hooks/use-set-query-focus-manager.ts b/template/src/hooks/use-set-query-focus-manager.ts new file mode 100644 index 0000000..fb925ce --- /dev/null +++ b/template/src/hooks/use-set-query-focus-manager.ts @@ -0,0 +1,13 @@ +import { focusManager } from '@tanstack/react-query'; +import { useEffect } from 'react'; +import { AppState } from 'react-native'; + +export function useSetQueryFocusManager() { + useEffect(() => { + const subscription = AppState.addEventListener('change', (appState) => { + focusManager.setFocused(appState === 'active'); + }); + + return () => subscription.remove(); + }, []); +} diff --git a/template/src/hooks/use-set-query-online-manager.ts b/template/src/hooks/use-set-query-online-manager.ts new file mode 100644 index 0000000..ae05fc2 --- /dev/null +++ b/template/src/hooks/use-set-query-online-manager.ts @@ -0,0 +1,11 @@ +import { useEffect } from 'react'; +import NetInfo from '@react-native-community/netinfo'; +import { onlineManager } from '@tanstack/react-query'; + +export function useSetQueryOnlineManager() { + useEffect(() => { + return NetInfo.addEventListener((state) => { + onlineManager.setOnline(!!state.isConnected); + }); + }, []); +} diff --git a/template/src/navigation/index.tsx b/template/src/navigation/index.tsx index 2341b13..8e73d85 100644 --- a/template/src/navigation/index.tsx +++ b/template/src/navigation/index.tsx @@ -8,12 +8,20 @@ import RootNavigator from './RootNavigator'; import { withBoundary } from '~/components/boundary'; import { useColorSchemeValue } from '~/hooks/use-color-scheme-value'; import { useKillswitch } from '~/hooks/use-killswitch'; +import { useSetQueryFocusManager } from '~/hooks/use-set-query-focus-manager'; +import { useSetQueryOnlineManager } from '~/hooks/use-set-query-online-manager'; +import { useInvalidateQueriesOnLanguageChange } from '~/hooks/use-invalidate-queries-on-language-change'; function Navigation() { const theme = useColorSchemeValue([DefaultTheme, DarkTheme]); useKillswitch(); + useSetQueryFocusManager(); + useSetQueryOnlineManager(); + + useInvalidateQueriesOnLanguageChange(); + return (