feat: enhanced refreshDeps, now can be used like watch #166

Author: John60676

src/__tests__/index.test.tsx

@@ -774,7 +774,7 @@ describe('useRequest', () => {
     expect(wrapper.data).toBe('3');
   });
 
-  test('refreshDeps should work', async () => {
+  test('refreshDeps should work: case 1', async () => {
     const wrapper = mount(
       defineComponent({
         template: '<div/>',
@@ -824,6 +824,76 @@ describe('useRequest', () => {
     }
   });
 
+  test('refreshDeps should work: case 2', async () => {
+    const wrapper = mount(
+      defineComponent({
+        template: '<div/>',
+        setup() {
+          const refreshReactive = reactive({
+            count: 0,
+          });
+          const { loading } = useRequest(request, {
+            refreshDeps: () => refreshReactive.count,
+          });
+
+          const handleUpdateReactive = () => {
+            refreshReactive.count++;
+          };
+
+          return {
+            loading,
+            handleUpdateReactive,
+          };
+        },
+      }),
+    );
+    expect(wrapper.loading).toBe(true);
+    await waitForTime(1000);
+    expect(wrapper.loading).toBe(false);
+
+    for (let index = 0; index < 100; index++) {
+      wrapper.handleUpdateReactive();
+      await waitForTime(1);
+      expect(wrapper.loading).toBe(true);
+      await waitForTime(1000);
+      expect(wrapper.loading).toBe(false);
+    }
+  });
+
+  test('refreshDeps should work: case 3', async () => {
+    const wrapper = mount(
+      defineComponent({
+        template: '<div/>',
+        setup() {
+          const refreshRef = ref(0);
+          const { loading } = useRequest(request, {
+            refreshDeps: refreshRef,
+          });
+
+          const handleUpdateRef = () => {
+            refreshRef.value++;
+          };
+
+          return {
+            loading,
+            handleUpdateRef,
+          };
+        },
+      }),
+    );
+    expect(wrapper.loading).toBe(true);
+    await waitForTime(1000);
+    expect(wrapper.loading).toBe(false);
+
+    for (let index = 0; index < 100; index++) {
+      wrapper.handleUpdateRef();
+      await waitForTime(1);
+      expect(wrapper.loading).toBe(true);
+      await waitForTime(1000);
+      expect(wrapper.loading).toBe(false);
+    }
+  });
+
   test('manual = true, refreshDeps should work', async () => {
     const wrapper = mount(
       defineComponent({

src/core/plugins/useRefreshDepsPlugin.ts

@@ -1,19 +1,25 @@
 import { watch } from 'vue-demi';
 
 import { definePlugin } from '../definePlugin';
+import { isArray } from '../utils';
 
 export default definePlugin(
-  (queryInstance, { refreshDeps = [], refreshDepsAction, manual }) => {
+  (queryInstance, { refreshDeps, refreshDepsAction, manual }) => {
+    if (
+      refreshDeps === undefined ||
+      (isArray(refreshDeps) && refreshDeps.length === 0)
+    )
+      return {};
+    const deps = isArray(refreshDeps) ? refreshDeps : [refreshDeps];
+
     // watch refreshDeps
-    if (refreshDeps?.length) {
-      watch(refreshDeps, () => {
-        if (refreshDepsAction) {
-          refreshDepsAction();
-        } else {
-          !manual && queryInstance.context.refresh();
-        }
-      });
-    }
+    watch(deps, () => {
+      if (refreshDepsAction) {
+        refreshDepsAction();
+      } else {
+        !manual && queryInstance.context.refresh();
+      }
+    });
     return {};
   },
 );

src/core/types.ts

@@ -75,7 +75,7 @@ export type Options<R, P extends unknown[]> = BaseOptions & {
   defaultParams?: P;
   ready?: Ref<boolean>;
   initialData?: R;
-  refreshDeps?: WatchSource<any>[];
+  refreshDeps?: WatchSource | WatchSource[];
   cacheKey?: string | ((params?: P) => string);
   refreshDepsAction?: () => void;
   onSuccess?: (data: R, params: P) => void;
@@ -91,9 +91,7 @@ export type PluginImplementType<R, P extends any[]> = {
 };
 
 export type PluginType<R, P extends unknown[]> = {
-  onBefore: (
-    params: P,
-  ) => {
+  onBefore: (params: P) => {
     isBreak?: Boolean;
     breakResult?: any;
   } | void;