Updated middleware to handle poll skipping

Changes made to the polling middleware to handle the situation when the page is out of focus. The code now includes a check to see whether to skip polling if the page is out of focus. Restructured the return from 'findLowestPollingInterval' function to include 'skipPollOnFocusLost' flag.

Author: riqts

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

@@ -53,35 +53,38 @@ export const buildPollingHandler: InternalHandlerBuilder = ({
     { queryCacheKey }: QuerySubstateIdentifier,
     api: SubMiddlewareApi
   ) {
-    const state = api.getState()[reducerPath]
-    const querySubState = state.queries[queryCacheKey]
-    const subscriptions = internalState.currentSubscriptions[queryCacheKey]
+    const state = api.getState()[reducerPath];
+    const querySubState = state.queries[queryCacheKey];
+    const subscriptions = internalState.currentSubscriptions[queryCacheKey];
 
     if (!querySubState || querySubState.status === QueryStatus.uninitialized)
-      return
+      return;
 
-    const lowestPollingInterval = findLowestPollingInterval(subscriptions)
-    if (!Number.isFinite(lowestPollingInterval)) return
+    const { lowestPollingInterval, skipPollOnFocusLost } = findLowestPollingInterval(subscriptions);
+    if (!Number.isFinite(lowestPollingInterval)) return;
 
-    const currentPoll = currentPolls[queryCacheKey]
+    const currentPoll = currentPolls[queryCacheKey];
 
     if (currentPoll?.timeout) {
-      clearTimeout(currentPoll.timeout)
-      currentPoll.timeout = undefined
+      clearTimeout(currentPoll.timeout);
+      currentPoll.timeout = undefined;
     }
 
-    const nextPollTimestamp = Date.now() + lowestPollingInterval
+    const nextPollTimestamp = Date.now() + lowestPollingInterval;
 
-    const currentInterval: typeof currentPolls[number] = (currentPolls[
-      queryCacheKey
-    ] = {
+    // Always update the polling interval
+    currentPolls[queryCacheKey] = {
       nextPollTimestamp,
       pollingInterval: lowestPollingInterval,
       timeout: setTimeout(() => {
-        currentInterval!.timeout = undefined
-        api.dispatch(refetchQuery(querySubState, queryCacheKey))
+        // Conditionally dispatch the query
+        if (document.hasFocus() || !skipPollOnFocusLost) {
+          api.dispatch(refetchQuery(querySubState, queryCacheKey));
+        }
+        // Regardless of dispatch, set up the next poll
+        startNextPoll({ queryCacheKey }, api);
       }, lowestPollingInterval),
-    })
+    };
   }
 
   function updatePollingInterval(
@@ -96,7 +99,7 @@ export const buildPollingHandler: InternalHandlerBuilder = ({
       return
     }
 
-    const lowestPollingInterval = findLowestPollingInterval(subscriptions)
+    const { lowestPollingInterval } = findLowestPollingInterval(subscriptions)
 
     if (!Number.isFinite(lowestPollingInterval)) {
       cleanupPollForKey(queryCacheKey)
@@ -126,17 +129,23 @@ export const buildPollingHandler: InternalHandlerBuilder = ({
   }
 
   function findLowestPollingInterval(subscribers: Subscribers = {}) {
+    let skipPollOnFocusLost: boolean | undefined = false
     let lowestPollingInterval = Number.POSITIVE_INFINITY
     for (let key in subscribers) {
       if (!!subscribers[key].pollingInterval) {
         lowestPollingInterval = Math.min(
           subscribers[key].pollingInterval!,
           lowestPollingInterval
         )
+        skipPollOnFocusLost = subscribers[key].skipPollOnFocusLost
       }
     }
 
-    return lowestPollingInterval
+    return {
+      lowestPollingInterval,
+      skipPollOnFocusLost,
+    }
   }
+
   return handler
 }