fix: use hook config on refocus or reconnect

Author: boschni

src/core/query.ts

@@ -232,32 +232,31 @@ export class Query<TResult, TError> {
   }
 
   onWindowFocus(): void {
-    if (
-      this.observers.some(
-        observer =>
-          observer.isStale() &&
-          observer.config.enabled &&
-          observer.config.refetchOnWindowFocus
-      )
-    ) {
-      this.fetch().catch(noop)
-    }
-
-    this.continue()
+    this.onInteraction(true, false)
   }
 
   onOnline(): void {
-    if (
-      this.observers.some(
-        observer =>
-          observer.isStale() &&
-          observer.config.enabled &&
-          observer.config.refetchOnReconnect
-      )
-    ) {
-      this.fetch().catch(noop)
+    this.onInteraction(false, true)
+  }
+
+  private onInteraction(focus: boolean, online: boolean): void {
+    // Execute the last subscribed observer which is enabled,
+    // stale and wants to refetch on this interaction.
+    for (let i = this.observers.length - 1; i >= 0; i--) {
+      const observer = this.observers[i]
+
+      if (
+        observer.isStale() &&
+        observer.config.enabled &&
+        ((observer.config.refetchOnWindowFocus && focus) ||
+          (observer.config.refetchOnReconnect && online))
+      ) {
+        observer.fetch().catch(noop)
+        break
+      }
     }
 
+    // Continue any paused fetch
     this.continue()
   }
 

src/react/tests/useQuery.test.tsx

@@ -644,7 +644,7 @@ describe('useQuery', () => {
 
     await queryCache.prefetchQuery(key, () => 'prefetch')
 
-    await sleep(40)
+    await sleep(20)
 
     function FirstComponent() {
       const state = useQuery(key, () => 'one', {
@@ -656,7 +656,7 @@ describe('useQuery', () => {
 
     function SecondComponent() {
       const state = useQuery(key, () => 'two', {
-        staleTime: 20,
+        staleTime: 10,
       })
       states2.push(state)
       return null
@@ -673,6 +673,8 @@ describe('useQuery', () => {
 
     render(<Page />)
 
+    console.log(states2)
+
     await waitFor(() => expect(states1.length).toBe(4))
     await waitFor(() => expect(states2.length).toBe(4))
 
@@ -1220,6 +1222,62 @@ describe('useQuery', () => {
     consoleMock.mockRestore()
   })
 
+  it('should refetch after focus regain', async () => {
+    const key = queryKey()
+    const states: QueryResult<string>[] = []
+    const consoleMock = mockConsoleError()
+
+    // make page unfocused
+    const originalVisibilityState = document.visibilityState
+    mockVisibilityState('hidden')
+
+    // set data in cache to check if the hook query fn is actually called
+    queryCache.setQueryData(key, 'prefetched')
+
+    function Page() {
+      const state = useQuery(key, () => 'data')
+      states.push(state)
+      return null
+    }
+
+    render(<Page />)
+
+    await waitFor(() => expect(states.length).toBe(2))
+
+    act(() => {
+      // reset visibilityState to original value
+      mockVisibilityState(originalVisibilityState)
+      window.dispatchEvent(new FocusEvent('focus'))
+    })
+
+    await waitFor(() => expect(states.length).toBe(4))
+
+    expect(states).toMatchObject([
+      {
+        data: 'prefetched',
+        isFetching: false,
+        isStale: false,
+      },
+      {
+        data: 'prefetched',
+        isFetching: false,
+        isStale: true,
+      },
+      {
+        data: 'prefetched',
+        isFetching: true,
+        isStale: true,
+      },
+      {
+        data: 'data',
+        isFetching: false,
+        isStale: true,
+      },
+    ])
+
+    consoleMock.mockRestore()
+  })
+
   // See https://github.com/tannerlinsley/react-query/issues/195
   it('should refetch if stale after a prefetch', async () => {
     const key = queryKey()