Query is stuck at isLoading: true but data has been fetched and no error

[joeattardi]

I'm running into an issue with RTK Query v2.2.3. It's very intermittent and there is no reliable way to reproduce it other than constantly refreshing the page and triggering the query, so I don't think I can post an example code that exhibits it. It takes a while but eventually I can reproduce it.

But what's happening is after the request succeeds, it's still stuck in a loading state. It stays in the isLoading state forever. I looked in the RTK Query devtools, and I don't even see an isLoading flag there:

Is the isLoading flag derived from other data? Could there be any situation where this gets stuck at isLoading: true even though isSuccess is true and the data has been returned?

[phryneas]

It is derived, but isLoading: true and isFetching: false should be impossible, since it's const isLoading = !hasData && isFetching.

Could you try to maybe record a Replay of it happening?

[markerikson]

I poked at the replay a bit and it does look like the effect deps array comparison is returning false, so that callback should be running. Don't have time to look at it more atm.

[aryaemami59]

Correct me if I'm wrong but could this be somehow related to the good ole useIsomorphicLayoutEffect issue similar to reduxjs/react-redux#2156?

[joeattardi]

@aryaemami59 Not sure if it would still apply but in my case I am working with React, not React Native

[aryaemami59]

@joeattardi I think this is caused by autoBatchEnhancer. If your query args change faster than the autoBatch timing out you get this behavior.

In App.tsx:

import { useGetTestQuery } from "./api"

let lastUpdatedTime = Date.now()

function getTimeInterval() {
  const now = Date.now()
  if (now - lastUpdatedTime >= 200) {
    lastUpdatedTime = now
  }
  return lastUpdatedTime
}

function App() {
  // Uncomment for scenario: Stuck on loading: Pass Date.now() as an argument to the query so that it's different on each render
  const { isLoading, isSuccess } = useGetTestQuery(getTimeInterval())
  // const { isLoading, isSuccess } = useGetTestQuery(Date.now());

  // Uncomment for scenario: Not stuck on loading: Don't pass any changing arguments to the query
  // const { isLoading, isSuccess } = useGetTestQuery('hello');

  return (
    <div>
      <h1>RTK Query</h1>
      {isLoading && <strong>LOADING</strong>}
      {isSuccess && <strong>SUCCESS</strong>}
    </div>
  )
}

export default App

in store.ts:

import { configureStore } from "@reduxjs/toolkit"
import { setupListeners } from "@reduxjs/toolkit/query/react"
import { api } from "./api"

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(api.middleware),
  enhancers: getDefaultEnhancers =>
    getDefaultEnhancers({ autoBatch: { type: "timer", timeout: 300 } }),
})

setupListeners(store.dispatch)

But now if you change timeout from 300 to 100, you get the desired behavior.

[markerikson]

@aryaemami59 hmm. Quite possibly, but looking at the linked replay, I'm still confused why it looks like the useEffect ought to be re-running multiple times and isn't. (I'd have to dig into it more, only had time for a brief look.)