Refetch usage with React Native and fixing "Cannot refetch a query that has not been started yet"

[git-commit]

Problem

I'm currently upgrading and refactoring a legacy react native app to use redux-toolkit and the most up to date react and react-native versions. During this process I've come across some questions regarding rtk's behaviour with react native.

Specifically I have an api slice and a view that needs to have up to date data when opened and periodically updates afterwards when open. Before in rtk 1.8.0 I would use NavigationEvents from react-navigation with the following (as a workaround forrefetchOnMountOrArgChange [1]):

<NavigationEvents
  onWillFocus={_ => {
    setIsVisible(true);
    refetch();
  }}
  onWillBlur={_ => {
    setIsVisible(false);
  }}
/>

and a query that skips if !isVisible:

  const [isVisible, setIsVisible] = React.useState(true);
  const {
    data,
    refetch,
  } = useApiRoute(undefined, {
    pollingInterval: 10000,
    skip: !isVisible
});

This stopped working after upgrading to rtk version 1.9.5 as I am getting a "Cannot refetch a query that has not been started yet" error on first open of the view.

What I've tried and detailed questions

1. I've tried using !isUninitialized to guard the use of refetch() but that results in the same error. I expect this could be a bug or at least unwanted behaviour, as the documentation for isUninitialized states it is true when Query has not started yet.
2. Trying to use refetchOnMountOrArgsChange again did not work
3. I implemented a boolean flag that get's set after the first render and guards the first call to refetch(), but subsequent onFocus events also result in the same "Cannot refetch a query..." error

Does anyone in the community have an idea why this behaviour is broken and knows a possible solution?

[1] I suspect on react-native the views remain mounted in the virtual DOM via the navigation history or maybe the view hierarchy in the app is majorly broken, and refetchOnMountOrArgChange doesn't work because of that. As I understand refetchOnFocus in not supposed to work for internal window switching.

[git-commit]

Downgrading to 1.8.5 resolves the issue, but being stuck with an old version is not really a long term solution.

[edmondkong-storyful]

I'm running into the exact same issue, minus the React Native setup.

It's happening for me in a component unit test. The component calls refetch() in an onClick handler, and in my test I am firing a click event that triggers the refetch().

Started happening when I upgraded from 1.7.5 to 1.9.5, upgraded because I needed the endpoint-level serializeQueryArgs.

[phryneas]

Can you wait in your test until the component has actually mounted completely? It seems you are calling refetch before the component had a chance to do anything.

[edmondkong-storyful]

Sorry late to respond, I don't think that is the issue, I'm just rendering a standard component in a unit test using testing-library.

In the end, I found another way around it using invalidatesTags instead of refetch.

[phryneas]

Are you maybe triggering an old reference to the refetch instance of the first render? That one is replaced by the real refetch function after the request is made.

[edmondkong-storyful]

I also tried it with the !isUninitialized guard like @sobczakDev , but it didn't work.

I presume when this flag is false, the refetch function will have been replaced.

[phryneas]

Yeah, my assumption is that you somewhere created a scope over that "first-run-refetch" and triggered that, even later.

[sobczakDev]

@git-commit did you found solution for the problem with refetch()?? I also have an issue, that during invokation of refetch() I'm getting an error: Cannot refetch a query that has not been started yet.
I also tried to use refetch() with the guard of !isUninitialized but unfortunately it's not working...

[kavinaravind]

I'm also having the same issue with 1.9.5:

I have a submit form func like so:

  const { data: userInfo, refetch } = useGetUserInfoQuery();
  const [transmitTransmission, { isLoading }] = useTransmitTransmissionMutation();
  
  const handleTransmitTransmissionSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    try {
      await transmitTransmission({ id }).unwrap();
      refetch();
      dispatch(setNotification(newSuccessNotification('Successful!', '')));
    } catch (error) {
      console.log(error);
      dispatch(setNotification(newErrorNotification('Error', handleError(error))));
    }
  };

On submit, refetch will throw an error Error: Cannot refetch a query that has not been started yet. I am unsure what I am doing wrong here, as I believe this is what the docs suggest as the correct way to force a fetch.

Any luck @sobczakDev @git-commit @edmondkong-storyful ?

[kavinaravind]

Looks like the only way I could address this issue while still using the latest and greatest version (1.9.6 as of today) is not using refetch() at all and instead using initiate() like so:

dispatch(api.endpoints.getUserInfo.initiate(undefined, {forceRefetch: true}))

Hope this helps!

[edmondkong-storyful]

My workaround was to stop using refetch and use invalidatesTags instead

https://redux-toolkit.js.org/rtk-query/usage/automated-refetching

[shivam9aug1996]

import { ThunkDispatch, createAction } from "@reduxjs/toolkit";
import { addNetworkStateListener } from "expo-network";
import {
  Platform,
  AppState,
  AppStateStatus,
  NativeEventSubscription,
} from "react-native";
import { type EventSubscription } from "expo-modules-core";

export const onFocus = createAction("__rtkq/focused");
export const onFocusLost = createAction("__rtkq/unfocused");
export const onOnline = createAction("__rtkq/online");
export const onOffline = createAction("__rtkq/offline");

let initialized: Boolean = false;


export function setupListeners(
  dispatch: ThunkDispatch<any, any, any>,
  customHandler?: (
    dispatch: ThunkDispatch<any, any, any>,
    actions: {
      onFocus: typeof onFocus;
      onFocusLost: typeof onFocusLost;
      onOnline: typeof onOnline;
      onOffline: typeof onOffline;
    }
  ) => () => void
) {
  const mobileDefaultHandler = () => {
    const handleFocus = () => dispatch(onFocus());
    const handleFocusLost = () => dispatch(onFocusLost());
    const handleOnline = () => dispatch(onOnline());
    const handleOffline = () => dispatch(onOffline());

    let unsubscribeAppState: NativeEventSubscription;
    let networkSubscription: EventSubscription;

    if (!initialized) {
      const handleAppStateChange = (nextAppState: AppStateStatus) => {
        if (nextAppState === "active") {
          handleFocus();
        } else {
          handleFocusLost();
        }
      };

      unsubscribeAppState = AppState.addEventListener(
        "change",
        handleAppStateChange
      );

      networkSubscription = addNetworkStateListener(
        ({ type, isConnected, isInternetReachable }) => {
          if (isConnected && isInternetReachable) {
            handleOnline();
          } else {
            handleOffline();
          }
          console.log(
            `Network type: ${type}, Connected: ${isConnected}, Internet Reachable: ${isInternetReachable}`
          );
        }
      );

      initialized = true;
    }

    const unsubscribe = () => {
      if (unsubscribeAppState) unsubscribeAppState.remove();
      if (networkSubscription) networkSubscription.remove();
      initialized = false;
    };

    return unsubscribe;
  };

  const webDefaultHandler = () => {
    const handleFocus = () => dispatch(onFocus());
    const handleFocusLost = () => dispatch(onFocusLost());
    const handleOnline = () => dispatch(onOnline());
    const handleOffline = () => dispatch(onOffline());
    const handleVisibilityChange = () => {
      if (window.document.visibilityState === "visible") {
        handleFocus();
      } else {
        handleFocusLost();
      }
    };

    if (!initialized) {
      if (typeof window !== "undefined" && window.addEventListener) {
        // Handle focus events
        window.addEventListener(
          "visibilitychange",
          handleVisibilityChange,
          false
        );
        window.addEventListener("focus", handleFocus, false);

        // Handle connection events
        window.addEventListener("online", handleOnline, false);
        window.addEventListener("offline", handleOffline, false);
        initialized = true;
      }
    }
    const unsubscribe = () => {
      window.removeEventListener("focus", handleFocus);
      window.removeEventListener("visibilitychange", handleVisibilityChange);
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
      initialized = false;
    };
    return unsubscribe;
  };

  return customHandler
    ? customHandler(dispatch, { onFocus, onFocusLost, onOffline, onOnline })
    : Platform.OS === "web"
    ? webDefaultHandler()
    : mobileDefaultHandler();
}
```ts