Skip to content

RefetchOnMountOrargChange keeps the isFetching always true #3580

@Irfanwani

Description

@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;

Activity

phryneas

phryneas commented on Jul 5, 2023

@phryneas
Member

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

Irfanwani

Irfanwani commented on Jul 5, 2023

@Irfanwani
Author

@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

markerikson commented on Jul 5, 2023

@markerikson
Collaborator

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

Irfanwani

Irfanwani commented on Jul 5, 2023

@Irfanwani
Author

yeah sure @markerikson please give me a minute

Irfanwani

Irfanwani commented on Jul 5, 2023

@Irfanwani
Author

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

Irfanwani commented on Jul 12, 2023

@Irfanwani
Author

@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.

Screen.Recording.2023-07-12.at.8.51.33.PM.mov
markerikson

markerikson commented on Jul 12, 2023

@markerikson
Collaborator

@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

Irfanwani commented on Jul 12, 2023

@Irfanwani
Author

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    RTK-QueryReact-NativeIndicates an issue specific to the React Native environmentneeds reproductionReport is waiting on a reproduction

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @markerikson@phryneas@Irfanwani@aryaemami59

        Issue actions

          RefetchOnMountOrargChange keeps the isFetching always true · Issue #3580 · reduxjs/redux-toolkit