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

…#37
AttoJS · Apr 19, 2021 · 66b3198 · 66b3198
1 parent 3362312
commit 66b3198
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 3 deletions.
diff --git a/src/__tests__/index.test.tsx b/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({

diff --git a/src/core/useAsyncQuery.ts b/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,