React Navigation - Query does not stop while navigate to another screen (refetchInterval)

[mohito12]

While navigate through screens it does not stop the running query from the previous screen that has the refetchInterval property. I understand the reason why this occurs but I can't find a RQuery solution . Is there any way to stop the query that has refetchInterval after navigate to another screen?

An example with react navigation useFocusEffect:

  const fetchData = async () => {
    const resp = await fetch("*");
    const data = await resp.json();
    setData(data);
    setLoading(false);
  };

  useFocusEffect(
    React.useCallback(() => {
      fetchData();
      const dataInterval = setInterval(() => fetchData(), 1000);
      return () => clearInterval(dataInterval);
    }, []),
  );

[joonmanji]

i'm guessing you figured this out but i'm doing something like this

import {useIsFocused} from "@react-navigation/core";

export const useFocusedRefreshInterval = (interval) => {
    const isFocused = useIsFocused();
    return isFocused ? interval : undefined;
};

and passing the result of this hook to refetchInterval .. basically only allowing the interval to passthrough if the screen is focused.