fix: root level refresh, mutate, cancel not work with queryKey #37

Author: John60676

src/__tests__/index.test.tsx

@@ -1342,6 +1342,76 @@ describe('useRequest', () => {
     }
   });
 
+  test('queryKey should work with root level `cancel`, `mutate`, `refresh`', async () => {
+    const users = [
+      { id: '1', username: 'A' },
+      { id: '2', username: 'B' },
+      { id: '3', username: 'C' },
+    ];
+
+    const wrapper = shallowMount(
+      defineComponent({
+        setup() {
+          const { run, queries, mutate, refresh, cancel } = useRequest(
+            request,
+            {
+              manual: true,
+              refreshOnWindowFocus: true,
+              queryKey: id => id,
+            },
+          );
+
+          return () => (
+            <div>
+              <div id="mutate" onClick={() => mutate('new data')} />
+              <div id="refresh" onClick={() => refresh()} />
+              <div id="cancel" onClick={() => cancel()} />
+              <ul>
+                {users.map(item => (
+                  <li
+                    key={item.id}
+                    id={item.username}
+                    onClick={() => run(item.id)}
+                  >
+                    {queries[item.id]?.loading
+                      ? 'loading'
+                      : queries[item.id]?.data}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          );
+        },
+      }),
+    );
+
+    const mutate = () => wrapper.find('#mutate').trigger('click');
+    const refresh = () => wrapper.find('#refresh').trigger('click');
+    const cancel = () => wrapper.find('#cancel').trigger('click');
+
+    for (let i = 0; i < users.length; i++) {
+      const userName = users[i].username;
+      const currentId = users[i].id;
+      const userElement = wrapper.find(`#${userName}`);
+      await userElement.trigger('click');
+      expect(userElement.text()).toBe('loading');
+      await waitForTime(1000);
+      expect(userElement.text()).toBe(currentId);
+
+      await mutate();
+      expect(userElement.text()).toBe('new data');
+
+      await userElement.trigger('click');
+      expect(userElement.text()).toBe('loading');
+      await waitForTime(100);
+      await cancel();
+      expect(userElement.text()).toBe('new data');
+
+      await refresh();
+      expect(userElement.text()).toBe('loading');
+    }
+  });
+
   test('errorRetry should work. case 1', async () => {
     const wrapper = shallowMount(
       defineComponent({

src/core/useAsyncQuery.ts

@@ -19,6 +19,7 @@ import {
 import createQuery, {
   InnerQueryState,
   InnerRunReturn,
+  Mutate,
   Query,
   QueryState,
   State,
@@ -222,6 +223,10 @@ function useAsyncQuery<R, P extends unknown[], FR>(
     });
   };
 
+  const cancel = () => latestQuery.value.cancel();
+  const refresh = () => latestQuery.value.refresh();
+  const mutate = <Mutate<R>>((arg: R) => latestQuery.value.mutate(arg));
+
   // initial run
   if (!manual) {
     initialAutoRunFlag.value = true;
@@ -282,9 +287,9 @@ function useAsyncQuery<R, P extends unknown[], FR>(
     data,
     error,
     params,
-    cancel: latestQuery.value.cancel,
-    refresh: latestQuery.value.refresh,
-    mutate: latestQuery.value.mutate,
+    cancel,
+    refresh,
+    mutate,
     run,
     reset,
     queries,