Fix resetApiState for skipped query hooks

packages/toolkit/src/query/react/buildHooks.ts

@@ -1547,25 +1547,31 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
     currentState: QueryResultSelectorResult<any>,
     lastResult: UseQueryStateDefaultResult<any> | undefined,
     queryArgs: any,
+    lastResultForReset: UseQueryStateDefaultResult<any> | undefined,
+    lastResultState: QuerySubState<any> | undefined,
   ): UseQueryStateDefaultResult<any> {
     // if we had a last result and the current result is uninitialized,
     // we might have called `api.util.resetApiState`
     // in this case, reset the hook
-    if (lastResult?.endpointName && currentState.isUninitialized) {
-      const { endpointName } = lastResult
+    const resetResult =
+      queryArgs === skipToken ? lastResultForReset : lastResult
+    if (resetResult?.endpointName && currentState.isUninitialized) {
+      const { endpointName } = resetResult
       const endpointDefinition = endpointDefinitions[endpointName]
       if (
-        queryArgs !== skipToken &&
-        serializeQueryArgs({
-          queryArgs: lastResult.originalArgs,
-          endpointDefinition,
-          endpointName,
-        }) ===
-          serializeQueryArgs({
-            queryArgs,
-            endpointDefinition,
-            endpointName,
-          })
+        queryArgs === skipToken
+          ? !lastResultState ||
+            lastResultState.status === QueryStatus.uninitialized
+          : serializeQueryArgs({
+              queryArgs: resetResult.originalArgs,
+              endpointDefinition,
+              endpointName,
+            }) ===
+            serializeQueryArgs({
+              queryArgs,
+              endpointDefinition,
+              endpointName,
+            })
       )
         lastResult = undefined
     }
@@ -1607,25 +1613,31 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
     currentState: InfiniteQueryResultSelectorResult<any>,
     lastResult: UseInfiniteQueryStateDefaultResult<any> | undefined,
     queryArgs: any,
+    lastResultForReset: UseInfiniteQueryStateDefaultResult<any> | undefined,
+    lastResultState: InfiniteQuerySubState<any> | undefined,
   ): UseInfiniteQueryStateDefaultResult<any> {
     // if we had a last result and the current result is uninitialized,
     // we might have called `api.util.resetApiState`
     // in this case, reset the hook
-    if (lastResult?.endpointName && currentState.isUninitialized) {
-      const { endpointName } = lastResult
+    const resetResult =
+      queryArgs === skipToken ? lastResultForReset : lastResult
+    if (resetResult?.endpointName && currentState.isUninitialized) {
+      const { endpointName } = resetResult
       const endpointDefinition = endpointDefinitions[endpointName]
       if (
-        queryArgs !== skipToken &&
-        serializeQueryArgs({
-          queryArgs: lastResult.originalArgs,
-          endpointDefinition,
-          endpointName,
-        }) ===
-          serializeQueryArgs({
-            queryArgs,
-            endpointDefinition,
-            endpointName,
-          })
+        queryArgs === skipToken
+          ? !lastResultState ||
+            lastResultState.status === QueryStatus.uninitialized
+          : serializeQueryArgs({
+              queryArgs: resetResult.originalArgs,
+              endpointDefinition,
+              endpointName,
+            }) ===
+            serializeQueryArgs({
+              queryArgs,
+              endpointDefinition,
+              endpointName,
+            })
       )
         lastResult = undefined
     }
@@ -1846,10 +1858,12 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
       const stableArg = useStableQueryArgs(skip ? skipToken : arg)
 
       type ApiRootState = Parameters<ReturnType<typeof select>>[0]
+      type SelectorWithLastResult = Selector<ApiRootState, any, [any, any]>
 
       const lastValue = useRef<any>(undefined)
+      const lastValueForReset = useRef<any>(undefined)
 
-      const selectDefaultResult: Selector<ApiRootState, any, [any]> = useMemo(
+      const selectDefaultResult: SelectorWithLastResult = useMemo(
         () =>
           // Normally ts-ignores are bad and should be avoided, but we're
           // already casting this selector to be `Selector<any>` anyway,
@@ -1861,6 +1875,29 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
               select(stableArg),
               (_: ApiRootState, lastResult: any) => lastResult,
               (_: ApiRootState) => stableArg,
+              (_: ApiRootState, _lastResult: any, lastResultForReset: any) =>
+                lastResultForReset,
+              (
+                state: ApiRootState,
+                _lastResult: any,
+                lastResultForReset: any,
+              ) => {
+                if (
+                  stableArg === skipToken &&
+                  lastResultForReset?.endpointName === endpointName
+                ) {
+                  const endpointDefinition = endpointDefinitions[endpointName]
+                  const queryCacheKey = serializeQueryArgs({
+                    queryArgs: lastResultForReset.originalArgs,
+                    endpointDefinition,
+                    endpointName,
+                  })
+
+                  return state[api.reducerPath]?.queries?.[queryCacheKey]
+                }
+
+                return undefined
+              },
             ],
             preSelector,
             {
@@ -1872,7 +1909,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         [select, stableArg],
       )
 
-      const querySelector: Selector<ApiRootState, any, [any]> = useMemo(
+      const querySelector: SelectorWithLastResult = useMemo(
         () =>
           selectFromResult
             ? createSelector([selectDefaultResult], selectFromResult, {
@@ -1884,17 +1921,21 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
 
       const currentState = useSelector(
         (state: RootState<Definitions, any, any>) =>
-          querySelector(state, lastValue.current),
+          querySelector(state, lastValue.current, lastValueForReset.current),
         shallowEqual,
       )
 
       const store = useStore<RootState<Definitions, any, any>>()
       const newLastValue = selectDefaultResult(
         store.getState(),
         lastValue.current,
+        lastValueForReset.current,
       )
       useIsomorphicLayoutEffect(() => {
         lastValue.current = newLastValue
+        if (newLastValue?.endpointName) {
+          lastValueForReset.current = newLastValue
+        }
       }, [newLastValue])
 
       return currentState

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -903,6 +903,40 @@ describe('hooks tests', () => {
         })
       })
 
+      test('clears retained data when resetApiState is dispatched while skipped', async () => {
+        const { result, rerender } = renderHook(
+          ([arg, skip]: [number, boolean]) =>
+            api.endpoints.getUser.useQuery(arg, { skip }),
+          {
+            wrapper: storeRef.wrapper,
+            initialProps: [5, false] as [number, boolean],
+          },
+        )
+
+        await waitFor(() => expect(result.current.isSuccess).toBe(true))
+        expect(result.current.data).toEqual({ name: 'Timmy' })
+
+        rerender([5, true])
+
+        expect(result.current).toMatchObject({
+          status: QueryStatus.uninitialized,
+          isSuccess: true,
+          data: { name: 'Timmy' },
+          currentData: undefined,
+        })
+
+        act(() => void storeRef.store.dispatch(api.util.resetApiState()))
+
+        await waitFor(() => {
+          expect(result.current).toMatchObject({
+            status: QueryStatus.uninitialized,
+            isSuccess: false,
+            data: undefined,
+            currentData: undefined,
+          })
+        })
+      })
+
       test('hook should not be stuck loading post resetApiState after re-render', async () => {
         const user = userEvent.setup()