Remove unsubscribed data on refocus instead of refetching them (#1974)

* Refetch should not happen if no active subscribers

Fixes #1530

* Changed logic and added test

* Forgot to remove test that should not be merged

* Fix return typo and rearranged logic

Author: AlexanderArvidsson

packages/toolkit/src/query/core/buildMiddleware/windowEventHandling.ts

@@ -1,12 +1,16 @@
 import { QueryStatus } from '../apiState'
+import type { QueryCacheKey } from '../apiState'
 import { onFocus, onOnline } from '../setupListeners'
 import type { SubMiddlewareApi, SubMiddlewareBuilder } from './types'
 
 export const build: SubMiddlewareBuilder = ({
   reducerPath,
   context,
+  api,
   refetchQuery,
 }) => {
+  const { removeQueryResult } = api.internalActions
+
   return (mwApi) =>
     (next) =>
     (action): any => {
@@ -35,12 +39,7 @@ export const build: SubMiddlewareBuilder = ({
         const querySubState = queries[queryCacheKey]
         const subscriptionSubState = subscriptions[queryCacheKey]
 
-        if (
-          !subscriptionSubState ||
-          !querySubState ||
-          querySubState.status === QueryStatus.uninitialized
-        )
-          return
+        if (!subscriptionSubState || !querySubState) continue
 
         const shouldRefetch =
           Object.values(subscriptionSubState).some(
@@ -52,7 +51,15 @@ export const build: SubMiddlewareBuilder = ({
             state.config[type])
 
         if (shouldRefetch) {
-          api.dispatch(refetchQuery(querySubState, queryCacheKey))
+          if (Object.keys(subscriptionSubState).length === 0) {
+            api.dispatch(
+              removeQueryResult({
+                queryCacheKey: queryCacheKey as QueryCacheKey,
+              })
+            )
+          } else if (querySubState.status !== QueryStatus.uninitialized) {
+            api.dispatch(refetchQuery(querySubState, queryCacheKey))
+          }
         }
       }
     })

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

@@ -37,6 +37,9 @@ const defaultApi = createApi({
 
 const storeRef = setupApiStore(defaultApi)
 
+let getIncrementedAmountState = () =>
+  storeRef.store.getState().api.queries['getIncrementedAmount(undefined)']
+
 afterEach(() => {
   amount = 0
 })
@@ -177,6 +180,46 @@ describe('refetchOnFocus tests', () => {
       expect(screen.getByTestId('amount').textContent).toBe('2')
     )
   })
+
+  test('useQuery hook cleans data if refetch without active subscribers', async () => {
+    let data, isLoading, isFetching
+
+    function User() {
+      ;({ data, isFetching, isLoading } =
+        defaultApi.endpoints.getIncrementedAmount.useQuery(undefined, {
+          refetchOnFocus: true,
+        }))
+      return (
+        <div>
+          <div data-testid="isLoading">{String(isLoading)}</div>
+          <div data-testid="isFetching">{String(isFetching)}</div>
+          <div data-testid="amount">{String(data?.amount)}</div>
+        </div>
+      )
+    }
+
+    const { unmount } = render(<User />, { wrapper: storeRef.wrapper })
+
+    await waitFor(() =>
+      expect(screen.getByTestId('isLoading').textContent).toBe('true')
+    )
+    await waitFor(() =>
+      expect(screen.getByTestId('isLoading').textContent).toBe('false')
+    )
+    await waitFor(() =>
+      expect(screen.getByTestId('amount').textContent).toBe('1')
+    )
+
+    unmount()
+
+    expect(getIncrementedAmountState()).not.toBeUndefined()
+
+    act(() => {
+      fireEvent.focus(window)
+    })
+
+    expect(getIncrementedAmountState()).toBeUndefined()
+  })
 })
 
 describe('refetchOnReconnect tests', () => {