react query does not auto refetch even the cached data become expired in react native

[talpx0]

// 30 * 60 * 1000    30 min
//  1 * 60 * 1000    1 min
// 60 * 60 * 1000     1 hour
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime:  1 * 60 * 1000, // 1 min in milliseconds
      staleTime: Infinity,
    },
  },
});

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
})

export const AppNavigator = (props: NavigationProps) => {
    let {themeMode} = useThemeMode();
    const theme = useTheme()
    const buttonStyle = themeMode ==="dark" ? 'light' : 'dark';
    const cotentStyle = themeMode ==='dark'? "light-content": "dark-content"
        
    onlineManager.setEventListener(setOnline => {
        return NetInfo.addEventListener(state => {
            setOnline(!!state.isConnected)
        })
    })
    useEffect(() => {
        if (Platform.OS === 'android') {
            NavigationBar.setBackgroundColorAsync(theme.colors.background);
            NavigationBar.setButtonStyleAsync(buttonStyle);
        }
        const subscription = AppState.addEventListener('change', onAppStateChange)
        SystemUI.setBackgroundColorAsync(theme.colors.background);
        return () => {
            if (Platform.OS === 'android') {
                NavigationBar.setBackgroundColorAsync(theme.colors.elevation.level2); 
            }
            subscription.remove()
        };
    }, [themeMode, theme]);
    return (
        <>
            <SafeAreaView edges={["top"]} style={{ backgroundColor: theme.colors.background  }}/>
            <AppStack />
            <StatusBar barStyle={cotentStyle}
                backgroundColor={theme.colors.background} 
            />
            <SafeAreaView edges={{bottom: 'off'}} 
                style={{ 
                    backgroundColor: theme.colors.background, 
                    paddingBottom: Platform.OS === 'ios' ? 12 : 0 
                }}
            />
        </>
    )
}

export const useGlobalDataFetch = (area: AreaStoreProps) => {
  const { provider, processor, adapterModel } = useWeatherProcessor(area);
  const lat = area?.coord?.lat;
  const lon = area?.coord?.lon;
  const region = area?.region;
  const {language} = useLanguageStore()
  const { rainSnowUnit, timeFormat, temperatureUnit } = useUnitStore();
  const units = { rainSnowUnit, timeFormat, temperatureUnit};
  const isEnabled = !!(lat && lon &&region && units );
  const {data:homeData, error, isLoading, refetch } = useQuery<HomeWeather>({
    queryKey: ['globalData', { provider, lat, lon, region, processor }],
    queryFn: () => 
      lat !== undefined && lon !== undefined && region !== undefined
        ? fetchWeatherData({ provider, lat, lon, region, processor})
        : Promise.reject("Missing lat, lon, or region"),
    enabled: isEnabled,
    select: useCallback((data:FetchWithPatch<any>) => {
     const processedData =  processor.convertToAppWeather(data, units, language)
     return processedData
     }, [processor, units, language])
  });

  return { 
    provider,
    error, 
    isLoading, 
    refetch, 
    homeData,
    processor, 
    adapterModel,
    ...units,
    language,
  };
};

I will have to manually trigger the update myself. When I close the app and reopen it, even if the data has already expired, it still shows me the old data. It has already expired, but I have to manually refresh to see the updates. How can I make it automatically refetch every time I close and reopen the app?

[TkDodo]

https://tanstack.com/query/v5/docs/framework/react/react-native#refetch-on-app-focus