fix: add memory leak warnings, fix tests

Author: DamianOsipiuk

package.json

@@ -88,7 +88,7 @@
     "typescript": "^5.0.4",
     "vite": "^4.4.4",
     "vitest": "^0.33.0",
-    "vue": "^3.2.47"
+    "vue": "^3.3.0"
   },
   "pnpm": {
     "patchedDependencies": {

packages/vue-query/package.json

@@ -64,14 +64,14 @@
     "vue-demi": "^0.14.5"
   },
   "devDependencies": {
-    "@vue/composition-api": "1.7.1",
-    "vue": "^3.2.47",
+    "@vue/composition-api": "1.7.2",
+    "vue": "^3.3.0",
     "vue2": "npm:[email protected]",
     "vue2.7": "npm:[email protected]"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.1.2",
-    "vue": "^2.5.0 || ^3.3.0"
+    "vue": "^2.6.0 || ^3.3.0"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {

packages/vue-query/src/useIsFetching.ts

@@ -1,4 +1,4 @@
-import { onScopeDispose, ref, watchSyncEffect } from 'vue-demi'
+import { getCurrentScope, onScopeDispose, ref, watchSyncEffect } from 'vue-demi'
 import { useQueryClient } from './useQueryClient'
 import type { Ref } from 'vue-demi'
 import type { QueryFilters as QF } from '@tanstack/query-core'
@@ -11,6 +11,14 @@ export function useIsFetching(
   fetchingFilters: MaybeRefDeep<QF> = {},
   queryClient?: QueryClient,
 ): 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 client = queryClient || useQueryClient()
 
   const isFetching = ref()

packages/vue-query/src/useMutation.ts

@@ -1,5 +1,6 @@
 import {
   computed,
+  getCurrentScope,
   onScopeDispose,
   reactive,
   readonly,
@@ -64,6 +65,14 @@ export function useMutation<
   >,
   queryClient?: QueryClient,
 ): 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 client = queryClient || useQueryClient()
   const options = computed(() => {
     return client.defaultMutationOptions(cloneDeepUnref(mutationOptions))

packages/vue-query/src/useMutationState.ts

@@ -1,4 +1,11 @@
-import { computed, onScopeDispose, readonly, ref, watch } from 'vue-demi'
+import {
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  readonly,
+  ref,
+  watch,
+} from 'vue-demi'
 import { useQueryClient } from './useQueryClient'
 import { cloneDeepUnref } from './utils'
 import type { DeepReadonly, Ref } from 'vue-demi'
@@ -18,6 +25,14 @@ export function useIsMutating(
   filters: MutationFilters = {},
   queryClient?: QueryClient,
 ): 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 client = queryClient || useQueryClient()
   const unreffedFilters = computed(() => ({
     ...cloneDeepUnref(filters),

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, readonly, ref, watch } from 'vue-demi'
+import {
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  readonly,
+  ref,
+  watch,
+} from 'vue-demi'
 
 import { useQueryClient } from './useQueryClient'
 import { cloneDeepUnref } from './utils'
@@ -167,6 +174,14 @@ export function useQueries<
   },
   queryClient?: QueryClient,
 ): Readonly<Ref<TCombinedResult>> {
+  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 client = queryClient || useQueryClient()
 
   const defaultedQueries = computed(() =>

packages/vue-query/test-setup.ts

@@ -1,14 +1,5 @@
 import { vi } from 'vitest'
 
-import Vue from 'vue2'
-Vue.config.productionTip = false
-Vue.config.devtools = false
-
-// Hide annoying console warnings for Vue2
-import Vue27 from 'vue2.7'
-Vue27.config.productionTip = false
-Vue27.config.devtools = false
-
 vi.mock('vue-demi', async () => {
   const vue = await vi.importActual('vue-demi')
   return {
@@ -17,5 +8,6 @@ vi.mock('vue-demi', async () => {
     provide: vi.fn(),
     onScopeDispose: vi.fn(),
     getCurrentInstance: vi.fn(() => ({ proxy: {} })),
+    hasInjectionContext: vi.fn(() => true),
   }
 })

packages/vue-query/vitest.config.ts

@@ -9,5 +9,10 @@ export default defineConfig({
     globals: true,
     setupFiles: ['test-setup.ts'],
     coverage: { provider: 'istanbul' },
+    onConsoleLog: function (log) {
+      if (log.includes('Download the Vue Devtools extension')) {
+        return false
+      }
+    },
   },
 })