feat: useIsMutating hook

Author: DamianOsipiuk

package-lock.json

@@ -33,7 +33,7 @@
   "homepage": "https://github.com/DamianOsipiuk/vue-query#readme",
   "dependencies": {
     "match-sorter": "^6.3.0",
-    "react-query": "^3.12.2",
+    "react-query": "^3.13.9",
     "vue-demi": "^0.7.4"
   },
   "peerDependencies": {

package.json

@@ -1,3 +1,5 @@
+/* istanbul ignore file */
+
 export { default as VueQueryDevTools } from "./Devtools.vue";
 export { default as VueQueryDevToolsPanel } from "./DevtoolsPanel.vue";
 export { VUE_QUERY_DEVTOOLS_THEME } from "./useTheme";

src/devtools/index.ts

@@ -1,3 +1,5 @@
+/* istanbul ignore file */
+
 export { QueryClient } from "react-query/core";
 
 export { useQueryClient, VUE_QUERY_CLIENT } from "./useQueryClient";
@@ -7,3 +9,4 @@ export { useQueries } from "./useQueries";
 export { useInfiniteQuery } from "./useInfiniteQuery";
 export { useMutation } from "./useMutation";
 export { useIsFetching } from "./useIsFetching";
+export { useIsMutating } from "./useIsMutating";

src/index.ts

@@ -0,0 +1,19 @@
+import { onUnmounted, Ref, ref } from "vue-demi";
+import { MutationFilters } from "react-query/types/core/utils";
+import { useQueryClient } from "./useQueryClient";
+
+export function useIsMutating(filters?: MutationFilters): Ref<number> {
+  const queryClient = useQueryClient();
+
+  const isMutating = ref(queryClient.isMutating(filters));
+
+  const unsubscribe = queryClient.getMutationCache().subscribe(() => {
+    isMutating.value = queryClient.isMutating(filters);
+  });
+
+  onUnmounted(() => {
+    unsubscribe();
+  });
+
+  return isMutating;
+}

src/useIsMutating.ts

@@ -0,0 +1,84 @@
+import { onUnmounted } from "vue-demi";
+import { QueryClient, setLogger } from "react-query/core";
+import { useMutation } from "../src/useMutation";
+import { useIsMutating } from "../src/useIsMutating";
+import { flushPromises, simpleFetcher, noop, successMutator } from "./utils";
+
+jest.mock("vue", () => {
+  const vue = jest.requireActual("vue");
+  return {
+    ...vue,
+    onUnmounted: jest.fn(),
+  };
+});
+
+jest.mock("../src/useQueryClient", () => {
+  const queryClient = new QueryClient();
+  return {
+    useQueryClient: jest.fn(() => queryClient),
+  };
+});
+
+jest.mock("../src/useBaseQuery", () => {
+  const { useBaseQuery: originImpl } = jest.requireActual(
+    "../src/useBaseQuery"
+  );
+  return {
+    useBaseQuery: jest.fn(originImpl),
+  };
+});
+
+describe("useIsMutating", () => {
+  beforeAll(() => {
+    setLogger({ log: noop, warn: noop, error: noop });
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("should properly return isMutating state", async () => {
+    const mutation = useMutation((params: string) => successMutator(params));
+    const mutation2 = useMutation((params: string) => successMutator(params));
+    const isMutating = useIsMutating();
+
+    expect(isMutating.value).toStrictEqual(0);
+
+    mutation.mutateAsync("a");
+    mutation2.mutateAsync("b");
+
+    await flushPromises();
+
+    expect(isMutating.value).toStrictEqual(2);
+
+    await flushPromises();
+
+    expect(isMutating.value).toStrictEqual(0);
+  });
+
+  test("should stop listening to changes on onUnmount", async () => {
+    const onUnmountedMock = onUnmounted as jest.MockedFunction<
+      typeof onUnmounted
+    >;
+    onUnmountedMock.mockImplementation((fn) => fn());
+
+    const mutation = useMutation((params: string) => successMutator(params));
+    const mutation2 = useMutation((params: string) => successMutator(params));
+    const isMutating = useIsMutating();
+
+    expect(isMutating.value).toStrictEqual(0);
+
+    mutation.mutateAsync("a");
+    mutation2.mutateAsync("b");
+
+    await flushPromises();
+
+    expect(isMutating.value).toStrictEqual(0);
+
+    await flushPromises();
+
+    expect(isMutating.value).toStrictEqual(0);
+
+    onUnmountedMock.mockReset();
+  });
+});