From 3fba8a3856ab34fa7b8d31c1bc3280fee4b633a1 Mon Sep 17 00:00:00 2001 From: TomasDurica Date: Sun, 24 Apr 2022 17:33:19 +0200 Subject: [PATCH 1/5] fix: change from onUnmount to onScopeDispose hook --- src/__mocks__/vue-demi.ts | 2 +- src/devtools/DevtoolsPanel.vue | 4 ++-- src/vue/__tests__/useIsFetching.test.ts | 14 +++++++------- src/vue/__tests__/useIsMutating.test.ts | 12 ++++++------ src/vue/__tests__/useQueries.test.ts | 10 +++++----- src/vue/__tests__/useQuery.test.ts | 12 ++++++------ src/vue/__tests__/useQueryProvider.test.ts | 8 ++++---- src/vue/useBaseQuery.ts | 4 ++-- src/vue/useIsFetching.ts | 4 ++-- src/vue/useIsMutating.ts | 4 ++-- src/vue/useMutation.ts | 4 ++-- src/vue/useQueries.ts | 4 ++-- src/vue/useQueryProvider.ts | 4 ++-- 13 files changed, 43 insertions(+), 43 deletions(-) diff --git a/src/__mocks__/vue-demi.ts b/src/__mocks__/vue-demi.ts index 7c017b2..13eb4f7 100644 --- 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/devtools/DevtoolsPanel.vue b/src/devtools/DevtoolsPanel.vue index 74494b2..bb1ff07 100644 --- a/src/devtools/DevtoolsPanel.vue +++ b/src/devtools/DevtoolsPanel.vue @@ -9,7 +9,7 @@ import { Ref, ref, h, - onUnmounted, + onScopeDispose, } from "vue-demi"; import { useQueryClient } from "vue-query"; @@ -140,7 +140,7 @@ const DevtoolsPanel = defineComponent({ selectQueryClient(); - onUnmounted(() => unsubscribe); + onScopeDispose(() => unsubscribe); return { theme, diff --git a/src/vue/__tests__/useIsFetching.test.ts b/src/vue/__tests__/useIsFetching.test.ts index 889ebb7..8fc748f 100644 --- 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 index 53eec11..e1b33c0 100644 --- 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 index d35c651..5af8071 100644 --- 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 index 623acc4..7992dc7 100644 --- 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 index 4187537..d5c8038 100644 --- 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 index a387104..6db4585 100644 --- 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 index 87f5440..dd2a82a 100644 --- 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 index c032abe..20ceefe 100644 --- 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 index 5cbe4ef..2c83c39 100644 --- 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 index e4d493c..2a8f551 100644 --- 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( }); } - onUnmounted(() => { + onScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useQueryProvider.ts b/src/vue/useQueryProvider.ts index 9be5f29..68d948c 100644 --- 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(); }); } From ff20bea11dcb53ddd7b94385ac494cbca3e53684 Mon Sep 17 00:00:00 2001 From: TomasDurica Date: Mon, 25 Apr 2022 15:55:10 +0200 Subject: [PATCH 2/5] fix: use onScopeDispose hook only in vue 3 --- src/__mocks__/vue-demi.ts | 1 + src/devtools/DevtoolsPanel.vue | 4 ++-- src/vue/__tests__/useIsFetching.test.ts | 11 ++++++++--- src/vue/__tests__/useIsMutating.test.ts | 9 +++++++-- src/vue/__tests__/useQueries.test.ts | 9 ++++++--- src/vue/__tests__/useQuery.test.ts | 9 +++++++-- src/vue/__tests__/useQueryProvider.test.ts | 4 +++- src/vue/useBaseQuery.ts | 5 ++--- src/vue/useIsFetching.ts | 6 +++--- src/vue/useIsMutating.ts | 6 +++--- src/vue/useMutation.ts | 5 ++--- src/vue/useQueries.ts | 4 ++-- src/vue/useQueryProvider.ts | 6 +++--- src/vue/utils.ts | 10 +++++++++- 14 files changed, 58 insertions(+), 31 deletions(-) diff --git a/src/__mocks__/vue-demi.ts b/src/__mocks__/vue-demi.ts index 13eb4f7..6278173 100644 --- a/src/__mocks__/vue-demi.ts +++ b/src/__mocks__/vue-demi.ts @@ -10,5 +10,6 @@ module.exports = { inject: jest.fn(), provide: jest.fn(), onScopeDispose: jest.fn(), + onUnmounted: jest.fn(), getCurrentInstance: jest.fn(() => ({ proxy: {} })), }; diff --git a/src/devtools/DevtoolsPanel.vue b/src/devtools/DevtoolsPanel.vue index bb1ff07..74494b2 100644 --- a/src/devtools/DevtoolsPanel.vue +++ b/src/devtools/DevtoolsPanel.vue @@ -9,7 +9,7 @@ import { Ref, ref, h, - onScopeDispose, + onUnmounted, } from "vue-demi"; import { useQueryClient } from "vue-query"; @@ -140,7 +140,7 @@ const DevtoolsPanel = defineComponent({ selectQueryClient(); - onScopeDispose(() => unsubscribe); + onUnmounted(() => unsubscribe); return { theme, diff --git a/src/vue/__tests__/useIsFetching.test.ts b/src/vue/__tests__/useIsFetching.test.ts index 8fc748f..d8ac1d8 100644 --- a/src/vue/__tests__/useIsFetching.test.ts +++ b/src/vue/__tests__/useIsFetching.test.ts @@ -1,4 +1,4 @@ -import { onScopeDispose } from "vue-demi"; +import { onScopeDispose, onUnmounted } from "vue-demi"; import { setLogger } from "react-query/core"; import { flushPromises, simpleFetcher, noop } from "./test-utils"; @@ -33,13 +33,17 @@ describe("useIsFetching", () => { expect(isFetching.value).toStrictEqual(0); }); - test("should stop listening to changes on onScopeDispose", async () => { + test("should stop listening to changes on onUnmount", async () => { const onScopeDisposeMock = onScopeDispose as jest.MockedFunction< typeof onScopeDispose >; onScopeDisposeMock.mockImplementation((fn) => fn()); + const onUnmountedMock = onUnmounted as jest.MockedFunction< + typeof onUnmounted + >; + onUnmountedMock.mockImplementation((fn) => fn()); - const { status } = useQuery("onScopeDispose", simpleFetcher); + const { status } = useQuery("onUnmount", simpleFetcher); const isFetching = useIsFetching(); expect(status.value).toStrictEqual("loading"); @@ -56,5 +60,6 @@ describe("useIsFetching", () => { expect(isFetching.value).toStrictEqual(1); onScopeDisposeMock.mockReset(); + onUnmountedMock.mockReset(); }); }); diff --git a/src/vue/__tests__/useIsMutating.test.ts b/src/vue/__tests__/useIsMutating.test.ts index e1b33c0..e91d78b 100644 --- a/src/vue/__tests__/useIsMutating.test.ts +++ b/src/vue/__tests__/useIsMutating.test.ts @@ -1,4 +1,4 @@ -import { onScopeDispose } from "vue-demi"; +import { onScopeDispose, onUnmounted } from "vue-demi"; import { setLogger } from "react-query/core"; import { flushPromises, noop, successMutator } from "./test-utils"; @@ -36,11 +36,15 @@ describe("useIsMutating", () => { expect(isMutating.value).toStrictEqual(0); }); - test("should stop listening to changes on onScopeDispose", async () => { + test("should stop listening to changes on onUnmount", async () => { const onScopeDisposeMock = onScopeDispose as jest.MockedFunction< typeof onScopeDispose >; onScopeDisposeMock.mockImplementation((fn) => fn()); + 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)); @@ -60,6 +64,7 @@ describe("useIsMutating", () => { expect(isMutating.value).toStrictEqual(0); onScopeDisposeMock.mockReset(); + onUnmountedMock.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 index 5af8071..2f28ee6 100644 --- a/src/vue/__tests__/useQueries.test.ts +++ b/src/vue/__tests__/useQueries.test.ts @@ -1,4 +1,4 @@ -import { onScopeDispose, reactive } from "vue-demi"; +import { onScopeDispose, onUnmounted, reactive } from 'vue-demi' import { setLogger } from "react-query/core"; import { @@ -166,12 +166,15 @@ describe("useQueries", () => { ]); }); - test("should stop listening to changes on onScopeDispose", async () => { + test("should stop listening to changes on onUnmount", async () => { const onScopeDisposeMock = onScopeDispose as jest.MockedFunction< typeof onScopeDispose >; onScopeDisposeMock.mockImplementationOnce((fn) => fn()); - + const onUnmountedMock = onUnmounted as jest.MockedFunction< + typeof onUnmounted + >; + onUnmountedMock.mockImplementationOnce((fn) => fn()); const queries = [ { queryKey: "key41", diff --git a/src/vue/__tests__/useQuery.test.ts b/src/vue/__tests__/useQuery.test.ts index 7992dc7..4dfd533 100644 --- a/src/vue/__tests__/useQuery.test.ts +++ b/src/vue/__tests__/useQuery.test.ts @@ -3,6 +3,7 @@ import { reactive, ref, onScopeDispose, + onUnmounted, getCurrentInstance, } from "vue-demi"; import { QueryObserver, setLogger } from "react-query/core"; @@ -214,13 +215,17 @@ describe("useQuery", () => { expect(status.value).toStrictEqual("success"); }); - test("should stop listening to changes on onScopeDispose", async () => { + test("should stop listening to changes on onUnmount", async () => { const onScopeDisposeMock = onScopeDispose as jest.MockedFunction< typeof onScopeDispose >; onScopeDisposeMock.mockImplementationOnce((fn) => fn()); + const onUnmountedMock = onUnmounted as jest.MockedFunction< + typeof onUnmounted + >; + onUnmountedMock.mockImplementationOnce((fn) => fn()); - const { status } = useQuery("onScopeDispose", simpleFetcher); + const { status } = useQuery("onUnmount", simpleFetcher); expect(status.value).toStrictEqual("loading"); diff --git a/src/vue/__tests__/useQueryProvider.test.ts b/src/vue/__tests__/useQueryProvider.test.ts index d5c8038..ee5b935 100644 --- a/src/vue/__tests__/useQueryProvider.test.ts +++ b/src/vue/__tests__/useQueryProvider.test.ts @@ -1,4 +1,4 @@ -import { provide, onScopeDispose } from "vue-demi"; +import { provide, onScopeDispose, onUnmounted } from "vue-demi"; import { QueryClient } from "../queryClient"; import { useQueryProvider } from "../useQueryProvider"; @@ -11,6 +11,7 @@ jest.mock("../queryClient", () => ({ describe("useQueryProvider", () => { const provideSpy = provide as jest.Mock; const onScopeDisposeSpy = onScopeDispose as jest.Mock; + const onUnmountedSpy = onUnmounted as jest.Mock; const queryClientSpy = QueryClient as jest.Mock; const mount = jest.fn(); @@ -76,6 +77,7 @@ describe("useQueryProvider", () => { test("should call onScopeDispose on QueryClient", () => { onScopeDisposeSpy.mockImplementationOnce((fn) => fn()); + onUnmountedSpy.mockImplementationOnce((fn) => fn()); useQueryProvider(); diff --git a/src/vue/useBaseQuery.ts b/src/vue/useBaseQuery.ts index 6db4585..2bb37a2 100644 --- a/src/vue/useBaseQuery.ts +++ b/src/vue/useBaseQuery.ts @@ -1,5 +1,4 @@ import { - onScopeDispose, toRefs, readonly, ToRefs, @@ -14,7 +13,7 @@ import type { } from "react-query/core"; import type { QueryFunction } from "react-query/types/core"; import { useQueryClient } from "./useQueryClient"; -import { updateState, isQueryKey, cloneDeepUnref } from "./utils"; +import { updateState, isQueryKey, cloneDeepUnref, onUnmountedOrScopeDispose } from "./utils"; import { WithQueryClientKey } from "./types"; import { UseQueryOptions } from "./useQuery"; import { UseInfiniteQueryOptions } from "./useInfiniteQuery"; @@ -71,7 +70,7 @@ export function useBaseQuery< { deep: true } ); - onScopeDispose(() => { + onUnmountedOrScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useIsFetching.ts b/src/vue/useIsFetching.ts index dd2a82a..ac041ef 100644 --- a/src/vue/useIsFetching.ts +++ b/src/vue/useIsFetching.ts @@ -1,9 +1,9 @@ -import { onScopeDispose, Ref, ref, watchEffect } from "vue-demi"; +import { 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"; import { useQueryClient } from "./useQueryClient"; -import { parseFilterArgs } from "./utils"; +import { parseFilterArgs, onUnmountedOrScopeDispose } from "./utils"; import type { WithQueryClientKey } from "./types"; export type QueryFilters = WithQueryClientKey; @@ -34,7 +34,7 @@ export function useIsFetching( filters.value = parsedFiltersUpdate; }); - onScopeDispose(() => { + onUnmountedOrScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useIsMutating.ts b/src/vue/useIsMutating.ts index 20ceefe..3f8f6a8 100644 --- a/src/vue/useIsMutating.ts +++ b/src/vue/useIsMutating.ts @@ -1,9 +1,9 @@ -import { onScopeDispose, Ref, ref } from "vue-demi"; +import { Ref, ref } from "vue-demi"; import type { MutationKey } from "react-query/types/core"; import type { MutationFilters as MF } from "react-query/types/core/utils"; import { useQueryClient } from "./useQueryClient"; -import { parseMutationFilterArgs } from "./utils"; +import { parseMutationFilterArgs, onUnmountedOrScopeDispose } from "./utils"; import type { WithQueryClientKey } from "./types"; export type MutationFilters = WithQueryClientKey; @@ -26,7 +26,7 @@ export function useIsMutating( isMutating.value = queryClient.isMutating(filters); }); - onScopeDispose(() => { + onUnmountedOrScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useMutation.ts b/src/vue/useMutation.ts index 2c83c39..de4bb9e 100644 --- a/src/vue/useMutation.ts +++ b/src/vue/useMutation.ts @@ -1,5 +1,4 @@ import { - onScopeDispose, reactive, watchEffect, readonly, @@ -17,7 +16,7 @@ import { MutationObserverOptions, MutateFunction, } from "react-query/types/core"; -import { parseMutationArgs, updateState } from "./utils"; +import { parseMutationArgs, updateState, onUnmountedOrScopeDispose } from "./utils"; import { useQueryClient } from "./useQueryClient"; import { WithQueryClientKey } from "./types"; @@ -134,7 +133,7 @@ export function useMutation< observer.setOptions(options); }); - onScopeDispose(() => { + onUnmountedOrScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useQueries.ts b/src/vue/useQueries.ts index 2a8f551..c370c14 100644 --- a/src/vue/useQueries.ts +++ b/src/vue/useQueries.ts @@ -1,7 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { QueriesObserver } from "react-query/core"; import { - onScopeDispose, reactive, readonly, watch, @@ -18,6 +17,7 @@ import type { import { useQueryClient } from "./useQueryClient"; import { UseQueryOptions } from "./useQuery"; +import { onUnmountedOrScopeDispose } from "./utils"; // Avoid TS depth-limit error in case of large array literal type MAXIMUM_DEPTH = 20; @@ -164,7 +164,7 @@ export function useQueries( }); } - onScopeDispose(() => { + onUnmountedOrScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useQueryProvider.ts b/src/vue/useQueryProvider.ts index 68d948c..6de62df 100644 --- a/src/vue/useQueryProvider.ts +++ b/src/vue/useQueryProvider.ts @@ -1,7 +1,7 @@ -import { provide, onScopeDispose } from "vue-demi"; +import { provide } from "vue-demi"; import type { QueryClientConfig } from "react-query/types/core"; import { QueryClient } from "./queryClient"; -import { getClientKey } from "./utils"; +import { getClientKey, onUnmountedOrScopeDispose } from "./utils"; import { MaybeRefDeep } from "./types"; export function useQueryProvider( @@ -15,7 +15,7 @@ export function useQueryProvider( const key = getClientKey(id); provide(key, client); - onScopeDispose(() => { + onUnmountedOrScopeDispose(() => { client.unmount(); }); } diff --git a/src/vue/utils.ts b/src/vue/utils.ts index b3f8a41..312ef56 100644 --- a/src/vue/utils.ts +++ b/src/vue/utils.ts @@ -7,7 +7,7 @@ import type { QueryObserverOptions, QueryKey, } from "react-query/types/core"; -import { isRef, reactive, toRefs, unref, UnwrapRef } from "vue-demi"; +import { isRef, reactive, toRefs, unref, UnwrapRef, isVue2, onUnmounted, onScopeDispose } from "vue-demi"; import { QueryFilters } from "./useIsFetching"; import { MutationFilters } from "./useIsMutating"; @@ -161,3 +161,11 @@ function isPlainObject(value: unknown): boolean { const prototype = Object.getPrototypeOf(value); return prototype === null || prototype === Object.prototype; } + +export function onUnmountedOrScopeDispose(callback: () => void): void { + if (isVue2) { + onUnmounted(callback) + } else { + onScopeDispose(callback) + } +} \ No newline at end of file From dfbbdf720a64af3dba4e0672902026e5e9a5d6ac Mon Sep 17 00:00:00 2001 From: TomasDurica Date: Mon, 25 Apr 2022 17:52:17 +0200 Subject: [PATCH 3/5] fix: formatting mistakes --- src/vue/__tests__/useIsMutating.test.ts | 2 +- src/vue/__tests__/useQueries.test.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/vue/__tests__/useIsMutating.test.ts b/src/vue/__tests__/useIsMutating.test.ts index e91d78b..2bbf02e 100644 --- a/src/vue/__tests__/useIsMutating.test.ts +++ b/src/vue/__tests__/useIsMutating.test.ts @@ -43,7 +43,7 @@ describe("useIsMutating", () => { onScopeDisposeMock.mockImplementation((fn) => fn()); const onUnmountedMock = onUnmounted as jest.MockedFunction< typeof onUnmounted - >; + >; onUnmountedMock.mockImplementation((fn) => fn()); const mutation = useMutation((params: string) => successMutator(params)); diff --git a/src/vue/__tests__/useQueries.test.ts b/src/vue/__tests__/useQueries.test.ts index 2f28ee6..5d03d42 100644 --- a/src/vue/__tests__/useQueries.test.ts +++ b/src/vue/__tests__/useQueries.test.ts @@ -1,4 +1,4 @@ -import { onScopeDispose, onUnmounted, reactive } from 'vue-demi' +import { onScopeDispose, onUnmounted, reactive } from "vue-demi"; import { setLogger } from "react-query/core"; import { @@ -173,8 +173,9 @@ describe("useQueries", () => { onScopeDisposeMock.mockImplementationOnce((fn) => fn()); const onUnmountedMock = onUnmounted as jest.MockedFunction< typeof onUnmounted - >; + >; onUnmountedMock.mockImplementationOnce((fn) => fn()); + const queries = [ { queryKey: "key41", From dd059876452773ae38212bef5b89de34dd7563d1 Mon Sep 17 00:00:00 2001 From: TomasDurica Date: Tue, 26 Apr 2022 00:42:42 +0200 Subject: [PATCH 4/5] fix: switched back to onScopeDispose and instead bumped the nuxtjs/composition-api --- examples/nuxt-simple/package.json | 2 +- package.json | 4 ++-- src/__mocks__/vue-demi.ts | 1 - src/vue/__tests__/useIsFetching.test.ts | 9 ++------- src/vue/__tests__/useIsMutating.test.ts | 7 +------ src/vue/__tests__/useQueries.test.ts | 8 ++------ src/vue/__tests__/useQuery.test.ts | 5 ----- src/vue/__tests__/useQueryProvider.test.ts | 4 +--- src/vue/useBaseQuery.ts | 5 +++-- src/vue/useIsFetching.ts | 6 +++--- src/vue/useIsMutating.ts | 6 +++--- src/vue/useMutation.ts | 5 +++-- src/vue/useQueries.ts | 4 ++-- src/vue/useQueryProvider.ts | 6 +++--- src/vue/utils.ts | 10 +--------- 15 files changed, 27 insertions(+), 55 deletions(-) diff --git a/examples/nuxt-simple/package.json b/examples/nuxt-simple/package.json index 9ccfc40..57e5927 100644 --- 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 index 8975976..a4eabbf 100644 --- 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 index 6278173..13eb4f7 100644 --- a/src/__mocks__/vue-demi.ts +++ b/src/__mocks__/vue-demi.ts @@ -10,6 +10,5 @@ module.exports = { inject: jest.fn(), provide: jest.fn(), onScopeDispose: jest.fn(), - onUnmounted: jest.fn(), getCurrentInstance: jest.fn(() => ({ proxy: {} })), }; diff --git a/src/vue/__tests__/useIsFetching.test.ts b/src/vue/__tests__/useIsFetching.test.ts index d8ac1d8..ae736fc 100644 --- a/src/vue/__tests__/useIsFetching.test.ts +++ b/src/vue/__tests__/useIsFetching.test.ts @@ -1,4 +1,4 @@ -import { onScopeDispose, onUnmounted } from "vue-demi"; +import { onScopeDispose } from "vue-demi"; import { setLogger } from "react-query/core"; import { flushPromises, simpleFetcher, noop } from "./test-utils"; @@ -38,12 +38,8 @@ describe("useIsFetching", () => { typeof onScopeDispose >; onScopeDisposeMock.mockImplementation((fn) => fn()); - const onUnmountedMock = onUnmounted as jest.MockedFunction< - typeof onUnmounted - >; - onUnmountedMock.mockImplementation((fn) => fn()); - const { status } = useQuery("onUnmount", simpleFetcher); + const { status } = useQuery("onUnmounted", simpleFetcher); const isFetching = useIsFetching(); expect(status.value).toStrictEqual("loading"); @@ -60,6 +56,5 @@ describe("useIsFetching", () => { expect(isFetching.value).toStrictEqual(1); onScopeDisposeMock.mockReset(); - onUnmountedMock.mockReset(); }); }); diff --git a/src/vue/__tests__/useIsMutating.test.ts b/src/vue/__tests__/useIsMutating.test.ts index 2bbf02e..099e1a0 100644 --- a/src/vue/__tests__/useIsMutating.test.ts +++ b/src/vue/__tests__/useIsMutating.test.ts @@ -1,4 +1,4 @@ -import { onScopeDispose, onUnmounted } from "vue-demi"; +import { onScopeDispose } from "vue-demi"; import { setLogger } from "react-query/core"; import { flushPromises, noop, successMutator } from "./test-utils"; @@ -41,10 +41,6 @@ describe("useIsMutating", () => { typeof onScopeDispose >; onScopeDisposeMock.mockImplementation((fn) => fn()); - 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)); @@ -64,7 +60,6 @@ describe("useIsMutating", () => { expect(isMutating.value).toStrictEqual(0); onScopeDisposeMock.mockReset(); - onUnmountedMock.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 index 5d03d42..6f4cf17 100644 --- a/src/vue/__tests__/useQueries.test.ts +++ b/src/vue/__tests__/useQueries.test.ts @@ -1,4 +1,4 @@ -import { onScopeDispose, onUnmounted, reactive } from "vue-demi"; +import { onScopeDispose, reactive } from "vue-demi"; import { setLogger } from "react-query/core"; import { @@ -171,11 +171,7 @@ describe("useQueries", () => { typeof onScopeDispose >; onScopeDisposeMock.mockImplementationOnce((fn) => fn()); - const onUnmountedMock = onUnmounted as jest.MockedFunction< - typeof onUnmounted - >; - onUnmountedMock.mockImplementationOnce((fn) => fn()); - + const queries = [ { queryKey: "key41", diff --git a/src/vue/__tests__/useQuery.test.ts b/src/vue/__tests__/useQuery.test.ts index 4dfd533..1a7a809 100644 --- a/src/vue/__tests__/useQuery.test.ts +++ b/src/vue/__tests__/useQuery.test.ts @@ -3,7 +3,6 @@ import { reactive, ref, onScopeDispose, - onUnmounted, getCurrentInstance, } from "vue-demi"; import { QueryObserver, setLogger } from "react-query/core"; @@ -220,10 +219,6 @@ describe("useQuery", () => { typeof onScopeDispose >; onScopeDisposeMock.mockImplementationOnce((fn) => fn()); - const onUnmountedMock = onUnmounted as jest.MockedFunction< - typeof onUnmounted - >; - onUnmountedMock.mockImplementationOnce((fn) => fn()); const { status } = useQuery("onUnmount", simpleFetcher); diff --git a/src/vue/__tests__/useQueryProvider.test.ts b/src/vue/__tests__/useQueryProvider.test.ts index ee5b935..d5c8038 100644 --- a/src/vue/__tests__/useQueryProvider.test.ts +++ b/src/vue/__tests__/useQueryProvider.test.ts @@ -1,4 +1,4 @@ -import { provide, onScopeDispose, onUnmounted } from "vue-demi"; +import { provide, onScopeDispose } from "vue-demi"; import { QueryClient } from "../queryClient"; import { useQueryProvider } from "../useQueryProvider"; @@ -11,7 +11,6 @@ jest.mock("../queryClient", () => ({ describe("useQueryProvider", () => { const provideSpy = provide as jest.Mock; const onScopeDisposeSpy = onScopeDispose as jest.Mock; - const onUnmountedSpy = onUnmounted as jest.Mock; const queryClientSpy = QueryClient as jest.Mock; const mount = jest.fn(); @@ -77,7 +76,6 @@ describe("useQueryProvider", () => { test("should call onScopeDispose on QueryClient", () => { onScopeDisposeSpy.mockImplementationOnce((fn) => fn()); - onUnmountedSpy.mockImplementationOnce((fn) => fn()); useQueryProvider(); diff --git a/src/vue/useBaseQuery.ts b/src/vue/useBaseQuery.ts index 2bb37a2..6db4585 100644 --- a/src/vue/useBaseQuery.ts +++ b/src/vue/useBaseQuery.ts @@ -1,4 +1,5 @@ import { + onScopeDispose, toRefs, readonly, ToRefs, @@ -13,7 +14,7 @@ import type { } from "react-query/core"; import type { QueryFunction } from "react-query/types/core"; import { useQueryClient } from "./useQueryClient"; -import { updateState, isQueryKey, cloneDeepUnref, onUnmountedOrScopeDispose } from "./utils"; +import { updateState, isQueryKey, cloneDeepUnref } from "./utils"; import { WithQueryClientKey } from "./types"; import { UseQueryOptions } from "./useQuery"; import { UseInfiniteQueryOptions } from "./useInfiniteQuery"; @@ -70,7 +71,7 @@ export function useBaseQuery< { deep: true } ); - onUnmountedOrScopeDispose(() => { + onScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useIsFetching.ts b/src/vue/useIsFetching.ts index ac041ef..dd2a82a 100644 --- a/src/vue/useIsFetching.ts +++ b/src/vue/useIsFetching.ts @@ -1,9 +1,9 @@ -import { 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"; import { useQueryClient } from "./useQueryClient"; -import { parseFilterArgs, onUnmountedOrScopeDispose } from "./utils"; +import { parseFilterArgs } from "./utils"; import type { WithQueryClientKey } from "./types"; export type QueryFilters = WithQueryClientKey; @@ -34,7 +34,7 @@ export function useIsFetching( filters.value = parsedFiltersUpdate; }); - onUnmountedOrScopeDispose(() => { + onScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useIsMutating.ts b/src/vue/useIsMutating.ts index 3f8f6a8..20ceefe 100644 --- a/src/vue/useIsMutating.ts +++ b/src/vue/useIsMutating.ts @@ -1,9 +1,9 @@ -import { 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"; import { useQueryClient } from "./useQueryClient"; -import { parseMutationFilterArgs, onUnmountedOrScopeDispose } from "./utils"; +import { parseMutationFilterArgs } from "./utils"; import type { WithQueryClientKey } from "./types"; export type MutationFilters = WithQueryClientKey; @@ -26,7 +26,7 @@ export function useIsMutating( isMutating.value = queryClient.isMutating(filters); }); - onUnmountedOrScopeDispose(() => { + onScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useMutation.ts b/src/vue/useMutation.ts index de4bb9e..2c83c39 100644 --- a/src/vue/useMutation.ts +++ b/src/vue/useMutation.ts @@ -1,4 +1,5 @@ import { + onScopeDispose, reactive, watchEffect, readonly, @@ -16,7 +17,7 @@ import { MutationObserverOptions, MutateFunction, } from "react-query/types/core"; -import { parseMutationArgs, updateState, onUnmountedOrScopeDispose } from "./utils"; +import { parseMutationArgs, updateState } from "./utils"; import { useQueryClient } from "./useQueryClient"; import { WithQueryClientKey } from "./types"; @@ -133,7 +134,7 @@ export function useMutation< observer.setOptions(options); }); - onUnmountedOrScopeDispose(() => { + onScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useQueries.ts b/src/vue/useQueries.ts index c370c14..2a8f551 100644 --- a/src/vue/useQueries.ts +++ b/src/vue/useQueries.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { QueriesObserver } from "react-query/core"; import { + onScopeDispose, reactive, readonly, watch, @@ -17,7 +18,6 @@ import type { import { useQueryClient } from "./useQueryClient"; import { UseQueryOptions } from "./useQuery"; -import { onUnmountedOrScopeDispose } from "./utils"; // Avoid TS depth-limit error in case of large array literal type MAXIMUM_DEPTH = 20; @@ -164,7 +164,7 @@ export function useQueries( }); } - onUnmountedOrScopeDispose(() => { + onScopeDispose(() => { unsubscribe(); }); diff --git a/src/vue/useQueryProvider.ts b/src/vue/useQueryProvider.ts index 6de62df..68d948c 100644 --- a/src/vue/useQueryProvider.ts +++ b/src/vue/useQueryProvider.ts @@ -1,7 +1,7 @@ -import { provide } from "vue-demi"; +import { provide, onScopeDispose } from "vue-demi"; import type { QueryClientConfig } from "react-query/types/core"; import { QueryClient } from "./queryClient"; -import { getClientKey, onUnmountedOrScopeDispose } from "./utils"; +import { getClientKey } from "./utils"; import { MaybeRefDeep } from "./types"; export function useQueryProvider( @@ -15,7 +15,7 @@ export function useQueryProvider( const key = getClientKey(id); provide(key, client); - onUnmountedOrScopeDispose(() => { + onScopeDispose(() => { client.unmount(); }); } diff --git a/src/vue/utils.ts b/src/vue/utils.ts index 312ef56..b3f8a41 100644 --- a/src/vue/utils.ts +++ b/src/vue/utils.ts @@ -7,7 +7,7 @@ import type { QueryObserverOptions, QueryKey, } from "react-query/types/core"; -import { isRef, reactive, toRefs, unref, UnwrapRef, isVue2, onUnmounted, onScopeDispose } from "vue-demi"; +import { isRef, reactive, toRefs, unref, UnwrapRef } from "vue-demi"; import { QueryFilters } from "./useIsFetching"; import { MutationFilters } from "./useIsMutating"; @@ -161,11 +161,3 @@ function isPlainObject(value: unknown): boolean { const prototype = Object.getPrototypeOf(value); return prototype === null || prototype === Object.prototype; } - -export function onUnmountedOrScopeDispose(callback: () => void): void { - if (isVue2) { - onUnmounted(callback) - } else { - onScopeDispose(callback) - } -} \ No newline at end of file From a54a9995538fa6b12a0bf654661df6b587280f3e Mon Sep 17 00:00:00 2001 From: Damian Osipiuk Date: Wed, 4 May 2022 09:43:03 +0200 Subject: [PATCH 5/5] test: fix some test names --- src/vue/__tests__/useIsFetching.test.ts | 4 ++-- src/vue/__tests__/useIsMutating.test.ts | 2 +- src/vue/__tests__/useQueries.test.ts | 2 +- src/vue/__tests__/useQuery.test.ts | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/vue/__tests__/useIsFetching.test.ts b/src/vue/__tests__/useIsFetching.test.ts index ae736fc..8fc748f 100644 --- a/src/vue/__tests__/useIsFetching.test.ts +++ b/src/vue/__tests__/useIsFetching.test.ts @@ -33,13 +33,13 @@ describe("useIsFetching", () => { expect(isFetching.value).toStrictEqual(0); }); - test("should stop listening to changes on onUnmount", async () => { + test("should stop listening to changes on onScopeDispose", async () => { const onScopeDisposeMock = onScopeDispose as jest.MockedFunction< typeof onScopeDispose >; onScopeDisposeMock.mockImplementation((fn) => fn()); - const { status } = useQuery("onUnmounted", simpleFetcher); + const { status } = useQuery("onScopeDispose", simpleFetcher); const isFetching = useIsFetching(); expect(status.value).toStrictEqual("loading"); diff --git a/src/vue/__tests__/useIsMutating.test.ts b/src/vue/__tests__/useIsMutating.test.ts index 099e1a0..e1b33c0 100644 --- a/src/vue/__tests__/useIsMutating.test.ts +++ b/src/vue/__tests__/useIsMutating.test.ts @@ -36,7 +36,7 @@ describe("useIsMutating", () => { expect(isMutating.value).toStrictEqual(0); }); - test("should stop listening to changes on onUnmount", async () => { + test("should stop listening to changes on onScopeDispose", async () => { const onScopeDisposeMock = onScopeDispose as jest.MockedFunction< typeof onScopeDispose >; diff --git a/src/vue/__tests__/useQueries.test.ts b/src/vue/__tests__/useQueries.test.ts index 6f4cf17..5af8071 100644 --- a/src/vue/__tests__/useQueries.test.ts +++ b/src/vue/__tests__/useQueries.test.ts @@ -166,7 +166,7 @@ describe("useQueries", () => { ]); }); - test("should stop listening to changes on onUnmount", async () => { + test("should stop listening to changes on onScopeDispose", async () => { const onScopeDisposeMock = onScopeDispose as jest.MockedFunction< typeof onScopeDispose >; diff --git a/src/vue/__tests__/useQuery.test.ts b/src/vue/__tests__/useQuery.test.ts index 1a7a809..7992dc7 100644 --- a/src/vue/__tests__/useQuery.test.ts +++ b/src/vue/__tests__/useQuery.test.ts @@ -214,13 +214,13 @@ describe("useQuery", () => { expect(status.value).toStrictEqual("success"); }); - test("should stop listening to changes on onUnmount", async () => { + test("should stop listening to changes on onScopeDispose", async () => { const onScopeDisposeMock = onScopeDispose as jest.MockedFunction< typeof onScopeDispose >; onScopeDisposeMock.mockImplementationOnce((fn) => fn()); - const { status } = useQuery("onUnmount", simpleFetcher); + const { status } = useQuery("onScopeDispose", simpleFetcher); expect(status.value).toStrictEqual("loading");