Helped needed in Forcing Refetch While RTK Query Request is In-Flight

[GowthamKrishna362]

Discussion: Force Refetch While RTK Query Request is In-Flight

Hi everyone 👋

I'm working on an RTK Query setup where a query endpoint (useXYZQuery) is being polled continuously. However, the user can also perform mutations that affect the same data.

I'm using tags to invalidate the polled query when mutations occur. But I've observed 2 behaviours which are slightly problematic to achieve this

If a mutation completes while a query is already in progress, the invalidation is deferred until all in-flight queries resolve.
If an api of a given endpoint is already in flight, using refetch() does not trigger another api call

This causes practical issues for us, since the query is heavy and takes time to complete. Ideally, I’d like to abort the in-flight query and immediately trigger a new fetch when a mutation occurs.

While the tag issue has been widely discussed and i understand there is no solution as of now, the second issue is a bit problematic in this case, because even when i manage to abort the previous APIs, I am guessing there are some sync issues with the state cleanup which indicates if an api is in flight, so ive to use a setTimeout as an escape hatch, as in the code below:-

---

What I’m Trying to Achieve

• Abort the in-progress polled query.
• Immediately refetch the same endpoint (useXYZQuery) to get updated data.

I’m managing abort controllers manually by extending a custom base query, storing them in a map per endpoint.

Here’s what I currently have:

function useForcedRefetch({ endpointName, refetch }) {
  const [forceRefetchInProgress, setForceRefetchInProgress] = useState(false);

  const forceRefetch = () => {
    const aborter = abortControllers[endpointName];
    if (aborter) {
      aborter(); // abort in-flight request
    }

    // Force a fresh refetch after abortion
    setTimeout(async () => {
      setForceRefetchInProgress(true);
      try {
        await refetch().unwrap();
      } catch (e) {
        console.error(e);
      } finally {
        setForceRefetchInProgress(false);
      }
    }, 0); // workaround to avoid refetch() being ignored if query was in-flight
  };

  return { forceRefetch, forceRefetchInProgress };
}

In component

const { data, refetch, endpointName } = useXYZQuery(undefined, {
  refetchOnMountOrArgChange: true,
  pollingInterval: 2000,
});

const { forceRefetch, forceRefetchInProgress } = useForcedRefetch({ endpointName: 'XYZ', refetch });

---

Questions

1. Is this the right approach?
   Is there a cleaner or more idiomatic way in RTKQ to handle this situation? Manually managing abort controllers + setTimeout feels a bit hacky.

2. Can refetch() be forced even when the query is in-flight?
   Ideally, I’d want to abort and re-trigger immediately, without relying on setTimeout as a delay to let state settle. If i could force a fetch request somehow i could even skip this hook entirely and do the cancellation in the baseQuery, which would be perfect

---

Final Thoughts

This works for now, but I’m wondering if there’s a better way to integrate abort → refetch logic, especially in polling scenarios where responsiveness to mutations is important.

Any guidance or suggestions are appreciated!

Thanks 🙏

[GowthamKrishna362]

Update: rewrote the refetch helper as follows:

export function refetchHelper({ trigger, endpointName, arg }) {
  return async (dispatch) => {
    const currQueryThunk = dispatch(apiSlice.util.getRunningQueryThunk(endpointName, arg));
    if (currQueryThunk?.abort) {
      currQueryThunk.abort();
      await currQueryThunk;
    }
    return trigger(arg);
  };
}