feat(vue-query): support invoke in vue runWithContext() (#5703)

* feat: support invoke in vue `runWithContext()`

* chore: run prettier

* feat(vue-qury): add a second parameter to inject to avoid vue warning

* test: update test

* fix: add warning about potential memory leak

---------

Co-authored-by: Damian Osipiuk <[email protected]>

Author: Mini-ghost

packages/vue-query/src/__tests__/useQueryClient.test.ts

@@ -18,15 +18,15 @@ 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', () => {
     injectSpy.mockReturnValueOnce(undefined)
 
     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)
   })
 })

packages/vue-query/src/useBaseQuery.ts

@@ -1,5 +1,6 @@
 import {
   computed,
+  getCurrentScope,
   onScopeDispose,
   reactive,
   readonly,
@@ -58,6 +59,14 @@ export function useBaseQuery<
     | UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {},
   arg3: UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {},
 ): UseQueryReturnType<TData, TError> {
+  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 =

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<QueryKey> | QueryFilters,
   arg2?: Omit<QueryFilters, 'queryKey'>,
 ): Ref<number> {
+  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)

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<MutationKey> | MutationFilters,
   arg2?: Omit<MutationFilters, 'mutationKey'>,
 ): Ref<number> {
+  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)

packages/vue-query/src/useMutation.ts

@@ -1,5 +1,6 @@
 import {
   computed,
+  getCurrentScope,
   onScopeDispose,
   reactive,
   readonly,
@@ -148,6 +149,14 @@ export function useMutation<
     VueMutationObserverOptions<TData, TError, TVariables, TContext>
   >,
 ): UseMutationReturnType<TData, TError, TVariables, TContext> {
+  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)
   })

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<T extends any[]>({
   queries: Ref<UseQueriesOptionsArg<T>> | UseQueriesOptionsArg<T>
   queryClient?: QueryClient
 }): Readonly<UseQueriesResults<T>> {
+  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<T>,
   )

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<QueryClient>(key)
+  const queryClient = inject<QueryClient | null>(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.",
     )