Refresh queries when the app gains focus and when changing the language

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]);
+}

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();
+  }, []);
+}

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);
+    });
+  }, []);
+}

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 (
     <NavigationContainer
       theme={theme}