refactor: add dev warning for effectScope

Author: posva

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/useQueryClient.ts

@@ -1,16 +1,14 @@
-import { getCurrentScope, hasInjectionContext, inject } from 'vue-demi'
+import { hasInjectionContext, inject } from 'vue-demi'
 
 import { getClientKey } from './utils'
 import type { QueryClient } from './queryClient'
 
 export function useQueryClient(id = ''): QueryClient {
-  if (
-    // ensures that `inject()` can be used
-    !hasInjectionContext() ||
-    // ensures `ref()`, `onScopeDispose()` and other APIs can be used
-    !getCurrentScope()
-  ) {
-    throw new Error('vue-query hooks can only be used inside setup() function.')
+  // ensures that `inject()` can be used
+  if (!hasInjectionContext()) {
+    throw new Error(
+      'vue-query hooks can only be used inside setup() function or functions that support injection context.',
+    )
   }
 
   const key = getClientKey(id)