feat: use onScopeDispose instead of onUnmount in composables (#179)

TomasDurica · DamianOsipiuk · web-flow · commit d6eff9619d8b · 2022-05-04T09:47:50.000+02:00
* fix: change from onUnmount to onScopeDispose hook

* fix: use onScopeDispose hook only in vue 3

* fix: formatting mistakes

* fix: switched back to onScopeDispose and instead bumped the nuxtjs/composition-api

* test: fix some test names

Co-authored-by: Damian Osipiuk &lt;osipiukd+git@gmail.com&gt;
diff --git a/examples/nuxt-simple/package.json b/examples/nuxt-simple/package.json
@@ -9,7 +9,7 @@
     "precommit": "npm run lint"
   },
   "dependencies": {
-    "@nuxtjs/composition-api": "^0.24.4",
+    "@nuxtjs/composition-api": "^0.28.0",
     "nuxt": "^2.0.0",
     "vue-query": "^1.5.1"
   },
diff --git a/package.json b/package.json
@@ -47,8 +47,8 @@
     "vue-demi": "0.10.1"
   },
   "peerDependencies": {
-    "@nuxtjs/composition-api": "^0.24.4",
-    "@vue/composition-api": "^1.0.0",
+    "@nuxtjs/composition-api": "^0.28.0",
+    "@vue/composition-api": "^1.1.2",
     "vue": "^2.0.0 || >=3.0.0"
   },
   "peerDependenciesMeta": {
diff --git a/src/__mocks__/vue-demi.ts b/src/__mocks__/vue-demi.ts
@@ -9,6 +9,6 @@ module.exports = {
   ...vue,
   inject: jest.fn(),
   provide: jest.fn(),
-  onUnmounted: jest.fn(),
+  onScopeDispose: jest.fn(),
   getCurrentInstance: jest.fn(() => ({ proxy: {} })),
 };
diff --git a/src/vue/__tests__/useIsFetching.test.ts b/src/vue/__tests__/useIsFetching.test.ts
@@ -1,4 +1,4 @@
-import { onUnmounted } from "vue-demi";
+import { onScopeDispose } from "vue-demi";
 import { setLogger } from "react-query/core";
 
 import { flushPromises, simpleFetcher, noop } from "./test-utils";
@@ -33,13 +33,13 @@ describe("useIsFetching", () => {
     expect(isFetching.value).toStrictEqual(0);
   });
 
-  test("should stop listening to changes on onUnmount", async () => {
-    const onUnmountedMock = onUnmounted as jest.MockedFunction<
-      typeof onUnmounted
+  test("should stop listening to changes on onScopeDispose", async () => {
+    const onScopeDisposeMock = onScopeDispose as jest.MockedFunction<
+      typeof onScopeDispose
     >;
-    onUnmountedMock.mockImplementation((fn) => fn());
+    onScopeDisposeMock.mockImplementation((fn) => fn());
 
-    const { status } = useQuery("onUnmounted", simpleFetcher);
+    const { status } = useQuery("onScopeDispose", simpleFetcher);
     const isFetching = useIsFetching();
 
     expect(status.value).toStrictEqual("loading");
@@ -55,6 +55,6 @@ describe("useIsFetching", () => {
     expect(status.value).toStrictEqual("loading");
     expect(isFetching.value).toStrictEqual(1);
 
-    onUnmountedMock.mockReset();
+    onScopeDisposeMock.mockReset();
   });
 });
diff --git a/src/vue/__tests__/useIsMutating.test.ts b/src/vue/__tests__/useIsMutating.test.ts
@@ -1,4 +1,4 @@
-import { onUnmounted } from "vue-demi";
+import { onScopeDispose } from "vue-demi";
 import { setLogger } from "react-query/core";
 
 import { flushPromises, noop, successMutator } from "./test-utils";
@@ -36,11 +36,11 @@ describe("useIsMutating", () => {
     expect(isMutating.value).toStrictEqual(0);
   });
 
-  test("should stop listening to changes on onUnmount", async () => {
-    const onUnmountedMock = onUnmounted as jest.MockedFunction<
-      typeof onUnmounted
+  test("should stop listening to changes on onScopeDispose", async () => {
+    const onScopeDisposeMock = onScopeDispose as jest.MockedFunction<
+      typeof onScopeDispose
     >;
-    onUnmountedMock.mockImplementation((fn) => fn());
+    onScopeDisposeMock.mockImplementation((fn) => fn());
 
     const mutation = useMutation((params: string) => successMutator(params));
     const mutation2 = useMutation((params: string) => successMutator(params));
@@ -59,7 +59,7 @@ describe("useIsMutating", () => {
 
     expect(isMutating.value).toStrictEqual(0);
 
-    onUnmountedMock.mockReset();
+    onScopeDisposeMock.mockReset();
   });
 
   test("should call `useQueryClient` with a proper `queryClientKey`", async () => {
diff --git a/src/vue/__tests__/useQueries.test.ts b/src/vue/__tests__/useQueries.test.ts
@@ -1,4 +1,4 @@
-import { onUnmounted, reactive } from "vue-demi";
+import { onScopeDispose, reactive } from "vue-demi";
 import { setLogger } from "react-query/core";
 
 import {
@@ -166,11 +166,11 @@ describe("useQueries", () => {
     ]);
   });
 
-  test("should stop listening to changes on onUnmount", async () => {
-    const onUnmountedMock = onUnmounted as jest.MockedFunction<
-      typeof onUnmounted
+  test("should stop listening to changes on onScopeDispose", async () => {
+    const onScopeDisposeMock = onScopeDispose as jest.MockedFunction<
+      typeof onScopeDispose
     >;
-    onUnmountedMock.mockImplementationOnce((fn) => fn());
+    onScopeDisposeMock.mockImplementationOnce((fn) => fn());
 
     const queries = [
       {
diff --git a/src/vue/__tests__/useQuery.test.ts b/src/vue/__tests__/useQuery.test.ts
@@ -2,7 +2,7 @@ import {
   computed,
   reactive,
   ref,
-  onUnmounted,
+  onScopeDispose,
   getCurrentInstance,
 } from "vue-demi";
 import { QueryObserver, setLogger } from "react-query/core";
@@ -214,13 +214,13 @@ describe("useQuery", () => {
     expect(status.value).toStrictEqual("success");
   });
 
-  test("should stop listening to changes on onUnmount", async () => {
-    const onUnmountedMock = onUnmounted as jest.MockedFunction<
-      typeof onUnmounted
+  test("should stop listening to changes on onScopeDispose", async () => {
+    const onScopeDisposeMock = onScopeDispose as jest.MockedFunction<
+      typeof onScopeDispose
     >;
-    onUnmountedMock.mockImplementationOnce((fn) => fn());
+    onScopeDisposeMock.mockImplementationOnce((fn) => fn());
 
-    const { status } = useQuery("onUnmounted", simpleFetcher);
+    const { status } = useQuery("onScopeDispose", simpleFetcher);
 
     expect(status.value).toStrictEqual("loading");
 
diff --git a/src/vue/__tests__/useQueryProvider.test.ts b/src/vue/__tests__/useQueryProvider.test.ts
@@ -1,4 +1,4 @@
-import { provide, onUnmounted } from "vue-demi";
+import { provide, onScopeDispose } from "vue-demi";
 import { QueryClient } from "../queryClient";
 
 import { useQueryProvider } from "../useQueryProvider";
@@ -10,7 +10,7 @@ jest.mock("../queryClient", () => ({
 
 describe("useQueryProvider", () => {
   const provideSpy = provide as jest.Mock;
-  const onUnmountedSpy = onUnmounted as jest.Mock;
+  const onScopeDisposeSpy = onScopeDispose as jest.Mock;
   const queryClientSpy = QueryClient as jest.Mock;
 
   const mount = jest.fn();
@@ -74,8 +74,8 @@ describe("useQueryProvider", () => {
     );
   });
 
-  test("should call unmount on QueryClient", () => {
-    onUnmountedSpy.mockImplementationOnce((fn) => fn());
+  test("should call onScopeDispose on QueryClient", () => {
+    onScopeDisposeSpy.mockImplementationOnce((fn) => fn());
 
     useQueryProvider();
 
diff --git a/src/vue/useBaseQuery.ts b/src/vue/useBaseQuery.ts
@@ -1,5 +1,5 @@
 import {
-  onUnmounted,
+  onScopeDispose,
   toRefs,
   readonly,
   ToRefs,
@@ -71,7 +71,7 @@ export function useBaseQuery<
     { deep: true }
   );
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
     unsubscribe();
   });
 
diff --git a/src/vue/useIsFetching.ts b/src/vue/useIsFetching.ts
@@ -1,4 +1,4 @@
-import { onUnmounted, Ref, ref, watchEffect } from "vue-demi";
+import { onScopeDispose, Ref, ref, watchEffect } from "vue-demi";
 import type { QueryKey } from "react-query/types/core";
 import type { QueryFilters as QF } from "react-query/types/core/utils";
 
@@ -34,7 +34,7 @@ export function useIsFetching(
     filters.value = parsedFiltersUpdate;
   });
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
     unsubscribe();
   });
 
diff --git a/src/vue/useIsMutating.ts b/src/vue/useIsMutating.ts
@@ -1,4 +1,4 @@
-import { onUnmounted, Ref, ref } from "vue-demi";
+import { onScopeDispose, Ref, ref } from "vue-demi";
 import type { MutationKey } from "react-query/types/core";
 import type { MutationFilters as MF } from "react-query/types/core/utils";
 
@@ -26,7 +26,7 @@ export function useIsMutating(
     isMutating.value = queryClient.isMutating(filters);
   });
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
     unsubscribe();
   });
 
diff --git a/src/vue/useMutation.ts b/src/vue/useMutation.ts
@@ -1,5 +1,5 @@
 import {
-  onUnmounted,
+  onScopeDispose,
   reactive,
   watchEffect,
   readonly,
@@ -134,7 +134,7 @@ export function useMutation<
     observer.setOptions(options);
   });
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
     unsubscribe();
   });
 
diff --git a/src/vue/useQueries.ts b/src/vue/useQueries.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { QueriesObserver } from "react-query/core";
 import {
-  onUnmounted,
+  onScopeDispose,
   reactive,
   readonly,
   watch,
@@ -164,7 +164,7 @@ export function useQueries<T extends any[]>(
     });
   }
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
     unsubscribe();
   });
 
diff --git a/src/vue/useQueryProvider.ts b/src/vue/useQueryProvider.ts
@@ -1,4 +1,4 @@
-import { provide, onUnmounted } from "vue-demi";
+import { provide, onScopeDispose } from "vue-demi";
 import type { QueryClientConfig } from "react-query/types/core";
 import { QueryClient } from "./queryClient";
 import { getClientKey } from "./utils";
@@ -15,7 +15,7 @@ export function useQueryProvider(
   const key = getClientKey(id);
   provide(key, client);
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
     client.unmount();
   });
 }
