react query randomly refetch and rerender

[avx99]

I work with react query in my app it works fine, few days ago I saw a wierd issue, randomly api get refetched even that before I did not have this issue, when I debug I remark that sometimes after getting notifications all apis within the page get refetched, here is the notification hook :

export const GET_NOTIFICATIONS = "GET_NOTIFICATIONS";
const useNotification = (autoFetch: boolean, query: any) => {
  const REFETCH_EACH = 7000;
  const { httpClient } = useAxios();

  const getNotifications = async () => httpClient?.get<any>(`${NOTIFICATIONS_ENDPOINT}/search`, query);

  return useQuery([GET_NOTIFICATIONS], () => getNotifications(), {
    enabled: autoFetch && httpClient !== undefined,
    /*
     * add refetchInterval: <time in ms> to get notif after each 15s for example
     */
    refetchInterval: autoFetch ? REFETCH_EACH : false
  });
};

and I call notification hook in a global context hook so other components get acces to it :

interface Props {
  children: ReactNode;
}

const GlobalContextProvider = (props: Props) => {
  const { state, setState } = useSharedContext();
  const { data: referentials, isSuccess, isFetching: referentialsFetching } = useReferentials();
  const { data: notifications, isSuccess: notificationsSuccess } = useNotification(true, {
    status: notificationStatus.PENDING.status,
    page: 0,
    size: 100
  });
  const { data: rbac, isSuccess: rbacSuccess, isFetching: rbacLoading } = useRoleBased();

  useEffect(() => {
    if (isSuccess && setState) {
      setState((prev) => ({
        ...prev,
        referentials
      }));
    }
  }, [referentials, isSuccess, setState]);

  useEffect(() => {
    if (notificationsSuccess && setState) {
      setState((prev) => ({
        ...prev,
        notifications
      }));
    }
  }, [notifications, notificationsSuccess]);

  useEffect(() => {
    if (rbacSuccess && setState) {
      setState((prev) => ({
        ...prev,
        rbac,

      }));
    }
  }, [rbac, rbacSuccess, setState]);



  if (rbacLoading || referentialsFetching) {
    return <FullPageLoader title="Chargement en cours..." />;
  }



  return <GlobalContext.Provider value={{ state, setState }}>{props.children}</GlobalContext.Provider>;
};

export default GlobalContextProvider;

this an api example taht get refetched randomly :

const usePreRegulationKpi = () => {
  const { httpClient } = useAxios();

  const getPreRegulationKpi = async () => httpClient?.get<any>(`${INTERMEDIATE_ENDPOINT}/kpi`);

  return useQuery([GET_REGULATION_KPI], () => getPreRegulationKpi(), {
    enabled: false
  });
};


// call example : 

  const {
    refetch: refetchPreRegulationKpi,
    isFetching: regulationKPIsLoading,
    isSuccess: regulationKPIsSuccess,
    isError: regulationKPIsError,
    data: regulationKPIsData
  } = usePreRegulationKpi();

and finally here is the react query global config :

import { QueryClient, QueryClientConfig } from "@tanstack/react-query";

const queryClientConfig: QueryClientConfig = {
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false
    }
  }
};

export const queryClient = new QueryClient(queryClientConfig);