From 934a472c4d0af68f4ba45bd2834338fafcc278bf Mon Sep 17 00:00:00 2001 From: Charles Demers Date: Tue, 10 Oct 2023 09:32:53 -0400 Subject: [PATCH 1/4] Refresh queries when the app gains focus and when changing the language --- template/src/navigation/RootNavigator.tsx | 20 +++++++++++++++++++- template/src/navigation/index.tsx | 7 +++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/template/src/navigation/RootNavigator.tsx b/template/src/navigation/RootNavigator.tsx index 098b459..aa49ada 100644 --- a/template/src/navigation/RootNavigator.tsx +++ b/template/src/navigation/RootNavigator.tsx @@ -4,7 +4,9 @@ import { NativeStackNavigationProp, NativeStackScreenProps, } from '@react-navigation/native-stack'; -import React from 'react'; +import React, { useEffect, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useQueryClient } from '@tanstack/react-query'; import { HomeScreen } from '../screens/Home'; import { ExampleBottomSheet } from '~/screens/bottom-sheets/ExampleBottomSheet'; import { SecretConfigScreen } from '~/screens/SecretConfig'; @@ -24,10 +26,26 @@ export type RootStackScreenProps = const Stack = createNativeStackNavigator(); function RootNavigator() { + const { i18n } = useTranslation(); + const languageRef = useRef(i18n.language); + const queryClient = useQueryClient(); + const secretPanelEnabled = useApplicationConfiguration( 'SECRET_PANEL_ENABLED' ); + 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]); + return ( diff --git a/template/src/navigation/index.tsx b/template/src/navigation/index.tsx index 2341b13..80df0f0 100644 --- a/template/src/navigation/index.tsx +++ b/template/src/navigation/index.tsx @@ -4,11 +4,18 @@ import { DefaultTheme, DarkTheme, } from '@react-navigation/native'; +import { AppState } from 'react-native'; +import { focusManager } from '@tanstack/react-query'; import RootNavigator from './RootNavigator'; import { withBoundary } from '~/components/boundary'; import { useColorSchemeValue } from '~/hooks/use-color-scheme-value'; import { useKillswitch } from '~/hooks/use-killswitch'; +// Notify react-query when the focused state changes +AppState.addEventListener('change', (appState) => { + focusManager.setFocused(appState === 'active'); +}); + function Navigation() { const theme = useColorSchemeValue([DefaultTheme, DarkTheme]); From 23d1451906031d9ccbc28138116342a692b38c08 Mon Sep 17 00:00:00 2001 From: Charles Demers Date: Tue, 10 Oct 2023 14:49:47 -0400 Subject: [PATCH 2/4] Wrap subscription in effect and add onlineManager --- template/src/navigation/index.tsx | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/template/src/navigation/index.tsx b/template/src/navigation/index.tsx index 80df0f0..1ae54e2 100644 --- a/template/src/navigation/index.tsx +++ b/template/src/navigation/index.tsx @@ -1,26 +1,38 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { NavigationContainer, DefaultTheme, DarkTheme, } from '@react-navigation/native'; import { AppState } from 'react-native'; -import { focusManager } from '@tanstack/react-query'; +import { focusManager, onlineManager } from '@tanstack/react-query'; +import NetInfo from '@react-native-community/netinfo'; import RootNavigator from './RootNavigator'; import { withBoundary } from '~/components/boundary'; import { useColorSchemeValue } from '~/hooks/use-color-scheme-value'; import { useKillswitch } from '~/hooks/use-killswitch'; -// Notify react-query when the focused state changes -AppState.addEventListener('change', (appState) => { - focusManager.setFocused(appState === 'active'); -}); - function Navigation() { const theme = useColorSchemeValue([DefaultTheme, DarkTheme]); useKillswitch(); + useEffect(() => { + // Refetch queries on app focus + const subscription = AppState.addEventListener('change', (appState) => { + focusManager.setFocused(appState === 'active'); + }); + + return () => subscription.remove(); + }, []); + + useEffect(() => { + // Refetch queries on reconnect + return NetInfo.addEventListener((state) => { + onlineManager.setOnline(!!state.isConnected); + }); + }, []); + return ( Date: Tue, 10 Oct 2023 15:04:54 -0400 Subject: [PATCH 3/4] Refactor --- .../src/hooks/use-set-query-focus-manager.ts | 13 ++++++++++ .../src/hooks/use-set-query-online-manager.ts | 11 ++++++++ template/src/navigation/index.tsx | 25 ++++--------------- 3 files changed, 29 insertions(+), 20 deletions(-) create mode 100644 template/src/hooks/use-set-query-focus-manager.ts create mode 100644 template/src/hooks/use-set-query-online-manager.ts 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 1ae54e2..0322964 100644 --- a/template/src/navigation/index.tsx +++ b/template/src/navigation/index.tsx @@ -1,37 +1,22 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { NavigationContainer, DefaultTheme, DarkTheme, } from '@react-navigation/native'; -import { AppState } from 'react-native'; -import { focusManager, onlineManager } from '@tanstack/react-query'; -import NetInfo from '@react-native-community/netinfo'; 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'; function Navigation() { const theme = useColorSchemeValue([DefaultTheme, DarkTheme]); useKillswitch(); - - useEffect(() => { - // Refetch queries on app focus - const subscription = AppState.addEventListener('change', (appState) => { - focusManager.setFocused(appState === 'active'); - }); - - return () => subscription.remove(); - }, []); - - useEffect(() => { - // Refetch queries on reconnect - return NetInfo.addEventListener((state) => { - onlineManager.setOnline(!!state.isConnected); - }); - }, []); + useSetQueryFocusManager(); + useSetQueryOnlineManager(); return ( Date: Tue, 10 Oct 2023 15:08:52 -0400 Subject: [PATCH 4/4] Refactor again --- ...e-invalidate-queries-on-language-change.ts | 21 +++++++++++++++++++ template/src/navigation/RootNavigator.tsx | 20 +----------------- template/src/navigation/index.tsx | 4 ++++ 3 files changed, 26 insertions(+), 19 deletions(-) create mode 100644 template/src/hooks/use-invalidate-queries-on-language-change.ts 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/navigation/RootNavigator.tsx b/template/src/navigation/RootNavigator.tsx index aa49ada..098b459 100644 --- a/template/src/navigation/RootNavigator.tsx +++ b/template/src/navigation/RootNavigator.tsx @@ -4,9 +4,7 @@ import { NativeStackNavigationProp, NativeStackScreenProps, } from '@react-navigation/native-stack'; -import React, { useEffect, useRef } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useQueryClient } from '@tanstack/react-query'; +import React from 'react'; import { HomeScreen } from '../screens/Home'; import { ExampleBottomSheet } from '~/screens/bottom-sheets/ExampleBottomSheet'; import { SecretConfigScreen } from '~/screens/SecretConfig'; @@ -26,26 +24,10 @@ export type RootStackScreenProps = const Stack = createNativeStackNavigator(); function RootNavigator() { - const { i18n } = useTranslation(); - const languageRef = useRef(i18n.language); - const queryClient = useQueryClient(); - const secretPanelEnabled = useApplicationConfiguration( 'SECRET_PANEL_ENABLED' ); - 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]); - return ( diff --git a/template/src/navigation/index.tsx b/template/src/navigation/index.tsx index 0322964..8e73d85 100644 --- a/template/src/navigation/index.tsx +++ b/template/src/navigation/index.tsx @@ -10,14 +10,18 @@ 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 (