fix: useQuery hook does not refetch after resetApiState

Author: juniusfree

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

@@ -1035,8 +1035,6 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         skipPollingIfUnfocused,
       })
 
-      const lastRenderHadSubscription = useRef(false)
-
       // TODO: Change this to `useRef<QueryActionCreatorResult<any>>(undefined)` after upgrading to React 19.
       /**
        * @todo Change this to `useRef<QueryActionCreatorResult<any>>(undefined)` after upgrading to React 19.
@@ -1059,11 +1057,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
       }
 
       const subscriptionRemoved =
-        !currentRenderHasSubscription && lastRenderHadSubscription.current
-
-      usePossiblyImmediateEffect(() => {
-        lastRenderHadSubscription.current = currentRenderHasSubscription
-      })
+        !currentRenderHasSubscription && promiseRef.current !== undefined
 
       usePossiblyImmediateEffect((): void | undefined => {
         if (subscriptionRemoved) {

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

@@ -895,6 +895,71 @@ describe('hooks tests', () => {
           status: 'uninitialized',
         })
       })
+
+      test('reset after unmount/remount', async () => {
+        const user = userEvent.setup()
+
+        function QueryComponent() {
+          const { isLoading, data } = api.endpoints.getUser.useQuery(1)
+
+          if (isLoading) {
+            return <p>Loading...</p>
+          }
+
+          return <p>{data?.name}</p>
+        }
+
+        function Wrapper() {
+          const [open, setOpen] = useState(true)
+
+          const handleRerender = () => {
+            setOpen(false)
+            setTimeout(() => {
+              setOpen(true)
+            }, 1000)
+          }
+
+          const handleReset = () => {
+            storeRef.store.dispatch(api.util.resetApiState())
+          }
+
+          return (
+            <>
+              <button onClick={handleRerender} aria-label="Rerender component">
+                Rerender
+              </button>
+              {open ? (
+                <div>
+                  <button onClick={handleReset} aria-label="Reset API state">
+                    Reset
+                  </button>
+
+                  <QueryComponent />
+                </div>
+              ) : null}
+            </>
+          )
+        }
+
+        render(<Wrapper />, { wrapper: storeRef.wrapper })
+
+        await user.click(
+          screen.getByRole('button', { name: /Rerender component/i }),
+        )
+        await waitFor(() => {
+          expect(screen.getByText('Timmy')).toBeTruthy()
+        })
+
+        await user.click(
+          screen.getByRole('button', { name: /reset api state/i }),
+        )
+        await waitFor(() => {
+          expect(screen.queryByText('Loading...')).toBeNull()
+        })
+        await waitFor(() => {
+          expect(screen.getByText('Timmy')).toBeTruthy()
+        })
+      })
     })
 
     test('useQuery refetch method returns a promise that resolves with the result', async () => {