fix(rtk-query): useQuery hook does not refetch after resetApiState (#4758)

* fix: useQuery hook does not refetch after resetApiState

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

* Try fixing flaky timeout test

---------

Co-authored-by: Mark Erikson <mark@isquaredsoftware.com>

Author: juniusfree

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

@@ -1661,8 +1661,6 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
       skipPollingIfUnfocused,
     })
 
-    const lastRenderHadSubscription = useRef(false)
-
     const initialPageParam = (rest as UseInfiniteQuerySubscriptionOptions<any>)
       .initialPageParam
     const stableInitialPageParam = useShallowStableValue(initialPageParam)
@@ -1686,11 +1684,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

@@ -902,6 +902,71 @@ describe('hooks tests', () => {
           status: 'uninitialized',
         })
       })
+
+      test('hook should not be stuck loading post resetApiState after re-render', 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 () => {

packages/toolkit/src/query/tests/createApi.test.ts

@@ -1181,7 +1181,7 @@ describe('timeout behavior', () => {
       http.get(
         'https://example.com/success',
         async () => {
-          await delay(10)
+          await delay(50)
           return HttpResponse.json({ value: 'failed' }, { status: 500 })
         },
         { once: true },