RTKQ useQuery hook does not refetch data after ```resetApiState()``` call

[emcol]

The issue is likely a bug in RTKQ and should have been fixed by #1735, although it does not seem so.

I provide a minimal example that showcase the issue in isolation and I share the codebase here

Below the steps to riproduce the bug:

• Run dev server;
• Notice that data is properly fetched;
• Click on reset button;

Expected results:

Data is correctly re-fetched after the API reset, the useQuery first returns a loading status and then fulfills causing the component to be re-rendered since it is subscribed to the endpoint.

Actual result:

The page gets stuck in a data loading state and useQuery hook does not fulfill blocking the user flow.

[gimi-anders]

I have also noticed this issue, and as a workaround I got it to work using useLazyQuery instead of useQuery.

[trvbr]

The useLazyQuery hack worked for me, too. However, it would have involved a lot of code changes to update every request in my app, so I took a different approach that might work for others who are running into this bug.

First, I added a common tag to each endpoint. I used Main in this example, but you can use anything.

export const exampleApi = createApi({
  // (...other API options here...)
  tagTypes: ['Main'],
  endpoints: (builder) => ({
    getThing: builder.query({
      query: (id) => `things/${id}`,
      providesTags: ['Main'],
    }),
    // (...other API endpoints here...)
  })
})

Then, I used invalidateTags() like this:

dispatch(exampleApi.util.invalidateTags(['Main']))

[phryneas]

Unfortunately we didn't get to this in time (really sorry!) and the reproduction is gone. Could you please add another reproduction?

[emcol]

Unfortunately we didn't get to this in time (really sorry!) and the reproduction is gone. Could you please add another reproduction?

Thank you very much for replying, the preview link should be updated now.

[emcol]

The useLazyQuery hack worked for me, too. However, it would have involved a lot of code changes to update every request in my app, so I took a different approach that might work for others who are running into this bug.

First, I added a common tag to each endpoint. I used Main in this example, but you can use anything.

export const exampleApi = createApi({
  // (...other API options here...)
  tagTypes: ['Main'],
  endpoints: (builder) => ({
    getThing: builder.query({
      query: (id) => `things/${id}`,
      providesTags: ['Main'],
    }),
    // (...other API endpoints here...)
  })
})

Then, I used invalidateTags() like this:

dispatch(exampleApi.util.invalidateTags(['Main']))

Thanks for the reply. I have already implemented a workaround like this but I didn't expect it to be necessary.

I expected the application to work even if the slice is reset and the component to request the data again, since they are necessary for rendering. That's why I opened an issue here.

[phryneas]

After some investigation, I think this is because of our new batchActions approach - it seems we forgot to reset this internal state on the resetApiState action.

[phryneas]

Could you please test the CI build from #3333? I just tested it in the repro and to me it seems to fix the problem.

[emcol]

I've just tested, I confirm that #3333 solves this issue. I have also updated again my preview app and seems to work, thank you again! 🤗