diff --git a/packages/vue-query/src/__tests__/useQueryClient.test.ts b/packages/vue-query/src/__tests__/useQueryClient.test.ts index 27861adf0e..becde82cc4 100644 --- a/packages/vue-query/src/__tests__/useQueryClient.test.ts +++ b/packages/vue-query/src/__tests__/useQueryClient.test.ts @@ -18,7 +18,7 @@ describe('useQueryClient', () => { expect(queryClient).toStrictEqual(queryClientMock) expect(injectSpy).toHaveBeenCalledTimes(1) - expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT) + expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT, null) }) test('should throw an error when queryClient does not exist in the context', () => { @@ -26,7 +26,7 @@ describe('useQueryClient', () => { expect(useQueryClient).toThrowError() expect(injectSpy).toHaveBeenCalledTimes(1) - expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT) + expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT, null) }) test('should throw an error when used outside of setup function', () => { @@ -44,6 +44,6 @@ describe('useQueryClient', () => { useQueryClient(queryClientKey) - expect(injectSpy).toHaveBeenCalledWith(expectedKeyParameter) + expect(injectSpy).toHaveBeenCalledWith(expectedKeyParameter, null) }) }) diff --git a/packages/vue-query/src/useBaseQuery.ts b/packages/vue-query/src/useBaseQuery.ts index 7dea6e351c..ecafa426c4 100644 --- a/packages/vue-query/src/useBaseQuery.ts +++ b/packages/vue-query/src/useBaseQuery.ts @@ -1,5 +1,6 @@ import { computed, + getCurrentScope, onScopeDispose, reactive, readonly, @@ -58,6 +59,14 @@ export function useBaseQuery< | UseQueryOptionsGeneric = {}, arg3: UseQueryOptionsGeneric = {}, ): UseQueryReturnType { + if (process.env.NODE_ENV === 'development') { + if (!getCurrentScope()) { + console.warn( + 'vue-query composables like "uesQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.', + ) + } + } + const options = computed(() => parseQueryArgs(arg1, arg2, arg3)) const queryClient = diff --git a/packages/vue-query/src/useIsFetching.ts b/packages/vue-query/src/useIsFetching.ts index 4a09f5b6fe..1e4c4c3bf5 100644 --- a/packages/vue-query/src/useIsFetching.ts +++ b/packages/vue-query/src/useIsFetching.ts @@ -1,4 +1,11 @@ -import { computed, onScopeDispose, ref, unref, watch } from 'vue-demi' +import { + computed, + getCurrentScope, + onScopeDispose, + ref, + unref, + watch, +} from 'vue-demi' import { useQueryClient } from './useQueryClient' import { cloneDeepUnref, isQueryKey } from './utils' import type { Ref } from 'vue-demi' @@ -17,6 +24,14 @@ export function useIsFetching( arg1?: MaybeRef | QueryFilters, arg2?: Omit, ): Ref { + if (process.env.NODE_ENV === 'development') { + if (!getCurrentScope()) { + console.warn( + 'vue-query composables like "uesQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.', + ) + } + } + const filters = computed(() => parseFilterArgs(arg1, arg2)) const queryClient = filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey) diff --git a/packages/vue-query/src/useIsMutating.ts b/packages/vue-query/src/useIsMutating.ts index 3a25c092ec..9e42ec3954 100644 --- a/packages/vue-query/src/useIsMutating.ts +++ b/packages/vue-query/src/useIsMutating.ts @@ -1,4 +1,11 @@ -import { computed, onScopeDispose, ref, unref, watch } from 'vue-demi' +import { + computed, + getCurrentScope, + onScopeDispose, + ref, + unref, + watch, +} from 'vue-demi' import { useQueryClient } from './useQueryClient' import { cloneDeepUnref, isQueryKey } from './utils' import type { Ref } from 'vue-demi' @@ -17,6 +24,14 @@ export function useIsMutating( arg1?: MaybeRef | MutationFilters, arg2?: Omit, ): Ref { + if (process.env.NODE_ENV === 'development') { + if (!getCurrentScope()) { + console.warn( + 'vue-query composables like "uesQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.', + ) + } + } + const filters = computed(() => parseFilterArgs(arg1, arg2)) const queryClient = filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey) diff --git a/packages/vue-query/src/useMutation.ts b/packages/vue-query/src/useMutation.ts index 97805b5a65..5e75dc1d0d 100644 --- a/packages/vue-query/src/useMutation.ts +++ b/packages/vue-query/src/useMutation.ts @@ -1,5 +1,6 @@ import { computed, + getCurrentScope, onScopeDispose, reactive, readonly, @@ -148,6 +149,14 @@ export function useMutation< VueMutationObserverOptions >, ): UseMutationReturnType { + if (process.env.NODE_ENV === 'development') { + if (!getCurrentScope()) { + console.warn( + 'vue-query composables like "uesQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.', + ) + } + } + const options = computed(() => { return parseMutationArgs(arg1, arg2, arg3) }) diff --git a/packages/vue-query/src/useQueries.ts b/packages/vue-query/src/useQueries.ts index b6af074d19..50e47dbc1a 100644 --- a/packages/vue-query/src/useQueries.ts +++ b/packages/vue-query/src/useQueries.ts @@ -1,6 +1,13 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { QueriesObserver } from '@tanstack/query-core' -import { computed, onScopeDispose, reactive, readonly, watch } from 'vue-demi' +import { + computed, + getCurrentScope, + onScopeDispose, + reactive, + readonly, + watch, +} from 'vue-demi' import { useQueryClient } from './useQueryClient' import { cloneDeepUnref } from './utils' import type { Ref } from 'vue-demi' @@ -133,6 +140,14 @@ export function useQueries({ queries: Ref> | UseQueriesOptionsArg queryClient?: QueryClient }): Readonly> { + if (process.env.NODE_ENV === 'development') { + if (!getCurrentScope()) { + console.warn( + 'vue-query composables like "uesQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.', + ) + } + } + const unreffedQueries = computed( () => cloneDeepUnref(queries) as UseQueriesOptionsArg, ) diff --git a/packages/vue-query/src/useQueryClient.ts b/packages/vue-query/src/useQueryClient.ts index ddbd75939d..ed63e585f9 100644 --- a/packages/vue-query/src/useQueryClient.ts +++ b/packages/vue-query/src/useQueryClient.ts @@ -4,16 +4,18 @@ import { getClientKey } from './utils' import type { QueryClient } from './queryClient' export function useQueryClient(id = ''): QueryClient { - const vm = getCurrentInstance()?.proxy - - if (!vm) { - throw new Error('vue-query hooks can only be used inside setup() function.') - } - const key = getClientKey(id) - const queryClient = inject(key) + const queryClient = inject(key, null) if (!queryClient) { + const vm = getCurrentInstance()?.proxy + + if (!vm) { + throw new Error( + 'vue-query hooks can only be used inside setup() function.', + ) + } + throw new Error( "No 'queryClient' found in Vue context, use 'VueQueryPlugin' to properly initialize the library.", )