fix: api.util.resetApiState should reset useQuery hooks

[phryneas]

This should provide a fix for #1725.

@ayushsharma82 could you please try this? In a few minutes, the CodeSandbox bot should comment on this issue and one of the links there should lead to installation instructions for this build.

[github-actions]

size-limit report 📦

Path	Size
1. entry point: @reduxjs/toolkit (cjs.production.min.js)	12.88 KB (0%)
1. entry point: @reduxjs/toolkit (esm.js)	10.76 KB (0%)
1. entry point: @reduxjs/toolkit/query (cjs.production.min.js)	22.53 KB (+0.02% 🔺)
1. entry point: @reduxjs/toolkit/query (esm.js)	18.87 KB (+0.02% 🔺)
1. entry point: @reduxjs/toolkit/query/react (cjs.production.min.js)	24.77 KB (+0.45% 🔺)
1. entry point: @reduxjs/toolkit/query/react (esm.js)	21.57 KB (+0.73% 🔺)
2. entry point: @reduxjs/toolkit (without dependencies) (cjs.production.min.js)	5.7 KB (0%)
2. entry point: @reduxjs/toolkit (without dependencies) (esm.js)	5.65 KB (0%)
2. entry point: @reduxjs/toolkit/query (without dependencies) (cjs.production.min.js)	10.01 KB (+0.03% 🔺)
2. entry point: @reduxjs/toolkit/query (without dependencies) (esm.js)	10.43 KB (+0.04% 🔺)
2. entry point: @reduxjs/toolkit/query/react (without dependencies) (cjs.production.min.js)	2.8 KB (+5.3% 🔺)
2. entry point: @reduxjs/toolkit/query/react (without dependencies) (esm.js)	3.21 KB (+28.46% 🔺)
3. createSlice (esm.js)	5.03 KB (0%)
3. createEntityAdapter (esm.js)	6.28 KB (0%)
3. configureStore (esm.js)	5.62 KB (0%)
3. createApi (esm.js)	17.1 KB (+0.02% 🔺)
3. createApi (react) (esm.js)	19.82 KB (+0.8% 🔺)
3. fetchBaseQuery (esm.js)	11.57 KB (0%)
3. setupListeners (esm.js)	10.39 KB (0%)
3. ApiProvider (esm.js)	18.45 KB (-0.29% 🔽)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3d47bbe:

Sandbox	Source
Vanilla	Configuration
Vanilla Typescript	Configuration
rsk-github-issues-example	Configuration
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration

[ayushsharma82]

@phryneas Tried this fix with my app and I can confirm that hooks are getting reset by looking at the placeholder components.

I'll also generate a small example to confirm that all hooks are getting reset or not.

[ayushsharma82]

@phryneas I've made this small demo to track this issue. It does reset all the hooks but data is never loaded again if the query is present during the dispatch of resetApiState. Let me know if this is an intended behaviour.

Demo uses c7d0efe

[phryneas]

Hmm you're right, that is not really optimal behaviour. I'll have to look into that tomorrow, but that could be tricky.

[phryneas]

@ayushsharma82 I think this should do it, but I'll have to reread that tomorrow. Your test seems to pass now - can you experiment a bit more with that please?

[ayushsharma82]

Sure, I'll add some more steps to that demo.

[ayushsharma82]

Works! ( https://codesandbox.io/s/reduxjs-redux-toolkit-forked-qu9n6?file=/src/App.tsx ) Added a 'hide' button to simulate query being removed and added again before/after dispatching resetApiState.

[dreyks]

Is this statement in docs still relevant or should it be removed?

redux-toolkit/docs/rtk-query/api/created-api/api-slice-utils.mdx

Line 371 in 4afef4a

Note that [hooks](./hooks.mdx) also track state in local component state and might not fully be reset by `resetApiState`.