RefetchOnMountOrargChange keeps the isFetching always true

[Irfanwani]

When setting RefetchOnMountOrargChange prop to true in a query, it only works fine on the first render. If i refresh the app, then the query is stuck in the loading state. Nothing special in the code;

const {data, isFetching, error, refetch} = useMyQuery(user_id, {
  refetchOnMountOrArgChange: true,
});

EDIT

This is the whole component;

import {SectionList, VStack} from 'native-base';
import {FC, useMemo, useState} from 'react';
import {BackHandler} from 'react-native';
import {useSelector} from 'react-redux';
import {
  NoBoards,
  Sectionheader,
  workspaceRenderItem,
} from '../../components/screencomponents/listcomponents';
import {Loader} from '../../components/utils/utils';
import {useGetworkspacesQuery} from '../../store/apislices/boardapislice';
import {useIsReady} from '../../utils/customhooks';
import {errorHandler} from '../../utils/errorhandler';
import {WorkspaceProps, WorkspaceRenderItemProps} from './types';

const WorkSpaces: FC<WorkspaceProps> = ({navigation}) => {
  const user_id = useSelector<any, any>((s) => s?.user?._id);

  const {data, isFetching, error, refetch} = useGetworkspacesQuery(user_id, {
    refetchOnMountOrArgChange: true,
  });

  useEffect(() => {
    if (error) errorHandler(error);
  }, [error]);

  const allspaces = useMemo(
    () => [
      {
        title: 'My Workspaces',
        data: data?.allWorkspaces ?? [],
      },
      {
        title: 'Guest Workspaces',
        data: data?.allguestWorkspace ?? [],
      },
    ],
    [data],
  );

  const renderItem = ({item, index, section}: WorkspaceRenderItemProps) => {
    let ind = section?.title?.includes('Guest')
      ? allspaces?.[0]?.data?.length + index
      : index;
    const onPress = () => {
      navigation.navigate('boards', {index: ind});
    };

    return workspaceRenderItem({item, index: ind, onPress});
  };

  const notReady = useIsReady();

  if (notReady) return <Loader />;
  return (
      <SectionList
        refreshing={isFetching}
        onRefresh={refetch}
        sections={allspaces ?? []}
        renderItem={renderItem}
        ListEmptyComponent={
          !isFetching ? <NoBoards screenname="workspace" /> : null
        }
        renderSectionHeader={Sectionheader}
        stickySectionHeadersEnabled
        ListFooterComponent={<VStack p="5" />}
      />
  );
};

export default WorkSpaces;

[phryneas]

I'm sorry, but we really need some kind of reproduction for that.

[Irfanwani]

@phryneas though i don't have any specific thing for this, but will update my comment with most of the code i am using. Also, please note that, everything works fine if the prop is removed, manual refreshing works fine.

BTW, this prop is causing same issues in another screen too. There, manual refetching was working fine (refetching on pull to refresh gesture or button click), but after adding refetchOnMountOrArgchange causes issues.

[markerikson]

Could you record and share a Replay ( https://replay.io/record-bugs ) that shows this happening?

[Irfanwani]

yeah sure @markerikson please give me a minute

[Irfanwani]

I don't know how, even after making no changes (infact in production build), it is working fine now. But if i got the issue again, i will post a video.

BTW, i got the issue with two queries not only one. And to repro, I simply had to close the app and when i opened the app, the query called in the home screen was stuck in loading state and never completed. Before using the prop in home screen, i was already using this in one of the other screens, and that worked fine one the first time i visited that screen. For the other visits, the query was stuck in loading state.

[Irfanwani]

@markerikson got the same issue today, here is the recording. Mostly i get this issue after refreshing the app and any one of the refresh it gets stuck in loading state, expecially in development mode.

https://github.com/reduxjs/redux-toolkit/assets/62456735/8fa04e8a-cf72-4959-a9ae-60673e346ace

[markerikson]

@Irfanwani unfortunately screen recordings really don't help - we need to see the code behavior to understand what's going on.

It would be most helpful if you could record a Replay with https://replay.io , but if this is an RN app that might not work (unless you can get it to happen using the Expo web target or something.)

[Irfanwani]

@markerikson sorry, though i cannot do that right now but if one request is going on and another request is made, can that cause issues (though I don't think so). As i said it mainly happens in dev mode especially when the app reloads due to changes made in code.

In production build, it happened when i posted this issue here. Now it is working fine in production