fix: useRequest pollingInterval invalid after staleTime is enabled

packages/hooks/src/useRequest/__tests__/usePollingPlugin.test.ts

@@ -116,4 +116,36 @@ describe('usePollingPlugin', () => {
     });
     await waitFor(() => expect(errorCallback).toHaveBeenCalledTimes(5));
   });
+
+  //github.com/alibaba/hooks/issues/2505
+  it('useRequest pollingInterval should work when set staleTime', async () => {
+    const callback = jest.fn();
+    act(() => {
+      hook = setUp(
+        () => {
+          callback();
+          return request(1);
+        },
+        {
+          staleTime: 3 * 1000,
+          pollingInterval: 1 * 1000,
+          cacheKey: 'testStaleTime',
+        },
+      );
+    });
+    expect(hook.result.current.loading).toBe(true);
+    act(() => {
+      jest.runAllTimers();
+    });
+    await waitFor(() => expect(hook.result.current.loading).toBe(false));
+    expect(hook.result.current.data).toBe('success');
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      jest.runAllTimers();
+    });
+    await waitFor(() => expect(hook.result.current.loading).toBe(false));
+    expect(hook.result.current.data).toBe('success');
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
 });

packages/hooks/src/useRequest/doc/polling/polling.en-US.md

@@ -60,3 +60,4 @@ You can experience the effect through the following example.
 - If you set `options.manual = true`, the initialization will not start polling, you need start it by `run/runAsync`.
 - If the `pollingInterval` changes from 0 to a value greater than 0, polling will not start automatically, and you need start it by `run/runAsync`.
 - The polling logic is to wait for `pollingInterval` time after each request is completed, and then initiate the next request.
+- When `pollingInterval`, `cacheKey`, and `staleTime` are all set, the system will wait for a duration of `pollingInterval`. If the data is still within the freshness time, no request will be sent. If the data is no longer fresh, the next request will be initiated.

packages/hooks/src/useRequest/doc/polling/polling.zh-CN.md

@@ -60,3 +60,4 @@ const { data, run, cancel } = useRequest(getUsername, {
 - 如果设置 `options.manual = true`，则初始化不会启动轮询，需要通过 `run/runAsync` 触发开始。
 - 如果设置 `pollingInterval` 由 `0` 变成 `大于 0` 的值，不会启动轮询，需要通过 `run/runAsync` 触发开始。
 - 轮询原理是在每次请求完成后，等待 `pollingInterval` 时间，发起下一次请求。
+- 当同时设置了`pollingInterval`,`cacheKey`,`staleTime`后，等待 `pollingInterval` 时间，如果仍然在数据新鲜时间內,不会发送请求。如果不在数据新鲜时间內,则发起下一次请求。

packages/hooks/src/useRequest/src/Fetch.ts

@@ -1,7 +1,14 @@
 /* eslint-disable @typescript-eslint/no-parameter-properties */
 import { isFunction } from '../../utils';
 import type { MutableRefObject } from 'react';
-import type { FetchState, Options, PluginReturn, Service, Subscribe } from './types';
+import type {
+  FetchState,
+  Options,
+  PluginReturn,
+  pluginsOptions,
+  Service,
+  Subscribe,
+} from './types';
 
 export default class Fetch<TData, TParams extends any[]> {
   pluginImpls: PluginReturn<TData, TParams>[];
@@ -49,6 +56,7 @@ export default class Fetch<TData, TParams extends any[]> {
     const {
       stopNow = false,
       returnNow = false,
+      pollingNow = false,
       ...state
     } = this.runPluginHandler('onBefore', params);
 
@@ -63,23 +71,46 @@ export default class Fetch<TData, TParams extends any[]> {
       ...state,
     });
 
+    const options: pluginsOptions = {
+      pollingNow,
+      returnNow,
+      stopNow,
+      cacheData: state.data,
+    };
     // return now
     if (returnNow) {
+      this.handleFn(params, currentCount, options);
       return Promise.resolve(state.data);
     }
 
+    return this.handleFn(params, currentCount, options);
+  }
+  async handleFn(params: TParams, currentCount: number, options: pluginsOptions) {
     this.options.onBefore?.(params);
-
+    const nowPollAndCacheFlag = options.pollingNow && options.returnNow;
+    let servicePromise;
     try {
-      // replace service
-      let { servicePromise } = this.runPluginHandler('onRequest', this.serviceRef.current, params);
-
-      if (!servicePromise) {
-        servicePromise = this.serviceRef.current(...params);
+      // avoid request when Polling and returnNow
+      if (!nowPollAndCacheFlag) {
+        servicePromise = this.runPluginHandler(
+          'onRequest',
+          this.serviceRef.current,
+          params,
+        ).servicePromise;
+        // replace service
+        if (!servicePromise) {
+          servicePromise = this.serviceRef.current(...params);
+        }
+      } else {
+        servicePromise = null;
       }
 
-      const res = await servicePromise;
-
+      let res;
+      if (nowPollAndCacheFlag) {
+        res = options.cacheData;
+      } else {
+        res = await servicePromise;
+      }
       if (currentCount !== this.count) {
         // prevent run.then when request is canceled
         return new Promise(() => {});
@@ -94,7 +125,7 @@ export default class Fetch<TData, TParams extends any[]> {
       });
 
       this.options.onSuccess?.(res, params);
-      this.runPluginHandler('onSuccess', res, params);
+      this.runPluginHandler('onSuccess', res, params, options);
 
       this.options.onFinally?.(params, res, undefined);
 

packages/hooks/src/useRequest/src/plugins/useCachePlugin.ts

@@ -15,6 +15,7 @@ const useCachePlugin: Plugin<any, any[]> = (
     staleTime = 0,
     setCache: customSetCache,
     getCache: customGetCache,
+    pollingInterval,
   },
 ) => {
   const unSubscribeRef = useRef<() => void>();
@@ -76,12 +77,23 @@ const useCachePlugin: Plugin<any, any[]> = (
 
       // If the data is fresh, stop request
       if (staleTime === -1 || new Date().getTime() - cacheData.time <= staleTime) {
-        return {
+        const commonData = {
           loading: false,
           data: cacheData?.data,
           error: undefined,
           returnNow: true,
         };
+        // handle polling status
+        if (pollingInterval) {
+          return {
+            ...commonData,
+            pollingNow: true,
+          };
+        }
+        return {
+          ...commonData,
+          pollingNow: false,
+        };
       } else {
         // If the data is stale, return data, and request continue
         return {
@@ -103,15 +115,19 @@ const useCachePlugin: Plugin<any, any[]> = (
       setCachePromise(cacheKey, servicePromise);
       return { servicePromise };
     },
-    onSuccess: (data, params) => {
+    onSuccess: (data, params, options) => {
       if (cacheKey) {
         // cancel subscribe, avoid trgger self
         unSubscribeRef.current?.();
-        _setCache(cacheKey, {
-          data,
-          params,
-          time: new Date().getTime(),
-        });
+        // avoid set the cache repeatly when pollingNow and returnNow
+        if (options.pollingNow && options.returnNow) {
+        } else {
+          _setCache(cacheKey, {
+            data,
+            params,
+            time: new Date().getTime(),
+          });
+        }
         // resubscribe
         unSubscribeRef.current = subscribe(cacheKey, (d) => {
           fetchInstance.setState({ data: d });

packages/hooks/src/useRequest/src/types.ts

@@ -13,7 +13,12 @@ export interface FetchState<TData, TParams extends any[]> {
   data?: TData;
   error?: Error;
 }
-
+export type pluginsOptions = {
+  pollingNow?: boolean;
+  returnNow?: boolean;
+  stopNow?: boolean;
+  cacheData?: any;
+};
 export interface PluginReturn<TData, TParams extends any[]> {
   onBefore?: (params: TParams) =>
     | ({
@@ -29,7 +34,7 @@ export interface PluginReturn<TData, TParams extends any[]> {
     servicePromise?: Promise<TData>;
   };
 
-  onSuccess?: (data: TData, params: TParams) => void;
+  onSuccess?: (data: TData, params: TParams, options: pluginsOptions) => void;
   onError?: (e: Error, params: TParams) => void;
   onFinally?: (params: TParams, data?: TData, e?: Error) => void;
   onCancel?: () => void;
@@ -94,10 +99,10 @@ export interface Options<TData, TParams extends any[]> {
 }
 
 export type Plugin<TData, TParams extends any[]> = {
-  (fetchInstance: Fetch<TData, TParams>, options: Options<TData, TParams>): PluginReturn<
-    TData,
-    TParams
-  >;
+  (
+    fetchInstance: Fetch<TData, TParams>,
+    options: Options<TData, TParams>,
+  ): PluginReturn<TData, TParams>;
   onInit?: (options: Options<TData, TParams>) => Partial<FetchState<TData, TParams>>;
 };