fix(vue-query): useQueries length change detection fix for vue2 (#4934)

* fix(vue-query): useQueries length change detection fix for vue2

BREAKING CHANGE: useQueries returns `ref` instead of `reactive`

Author: DamianOsipiuk

docs/config.json

@@ -565,6 +565,10 @@
             {
               "label": "Does this replace [Vuex, Pinia]?",
               "to": "vue/guides/does-this-replace-client-state"
+            },
+            {
+              "label": "Migrating to v5",
+              "to": "react/guides/migrating-to-v5"
             }
           ]
         },

docs/vue/guides/migrating-to-v5.md

@@ -0,0 +1,24 @@
+---
+id: migrating-to-tanstack-query-5
+title: Migrating to TanStack Query v5
+ref: docs/react/guides/migrating-to-v5.md
+---
+
+[//]: # 'FrameworkBreakingChanges'
+
+## Vue Query Breaking Changes
+
+### `useQueries` composable returns `ref` instead of `reactive`
+
+To fix compatibility with Vue 2, `useQueries` hook returns now `queries` array wrapped in `ref`.
+Previously `reactive` was returned which led to multiple problems:
+
+- User could spread return value loosing reactivity.
+- `readonly` wrapper used for return value was breaking Vue 2 reactivity detection mechanism. This was a silent issue in Vue 2.6, but appeared as error in Vue 2.7.
+- Vue 2 does not support arrays as a root value of `reactive`.
+
+With this change all of those issues are fixed.
+
+Also this aligns `useQueries` with other composables which return all of the values as `refs`.
+
+[//]: # 'FrameworkBreakingChanges'

packages/vue-query/__mocks__/vue-demi.ts

@@ -1,9 +1,19 @@
-const vue = jest.requireActual("vue-demi");
+// Hide annoying console warnings for Vue2
+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
+
+const vue = jest.requireActual('vue-demi')
 
 module.exports = {
   ...vue,
   inject: jest.fn(),
   provide: jest.fn(),
   onScopeDispose: jest.fn(),
   getCurrentInstance: jest.fn(() => ({ proxy: {} })),
-};
+}

packages/vue-query/package.json

@@ -30,7 +30,10 @@
     "clean": "rimraf ./build",
     "test:eslint": "eslint --ext .ts ./src",
     "test:types": "tsc",
-    "test:lib": "jest --config ./jest.config.ts",
+    "test:lib": "pnpm run test:2 && pnpm run test:2.7 && pnpm run test:3",
+    "test:2": "vue-demi-switch 2 vue2 && jest --config ./jest.config.ts",
+    "test:2.7": "vue-demi-switch 2.7 vue2.7 && jest --config ./jest.config.ts",
+    "test:3": "vue-demi-switch 3 && jest --config ./jest.config.ts",
     "test:lib:dev": "pnpm run test:lib --watch",
     "build:types": "tsc --build"
   },
@@ -40,13 +43,14 @@
   ],
   "devDependencies": {
     "@vue/composition-api": "1.7.1",
-    "vue": "^3.2.40",
-    "vue2": "npm:vue@2"
+    "vue": "^3.2.47",
+    "vue2": "npm:[email protected]",
+    "vue2.7": "npm:[email protected]"
   },
   "dependencies": {
     "@tanstack/query-core": "workspace:*",
-    "@vue/devtools-api": "^6.4.2",
-    "@tanstack/match-sorter-utils": "^8.1.1",
+    "@vue/devtools-api": "^6.5.0",
+    "@tanstack/match-sorter-utils": "^8.7.6",
     "vue-demi": "^0.13.11"
   },
   "peerDependencies": {

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

@@ -37,16 +37,12 @@ describe('QueryCache', () => {
       })
     })
 
-    test('should properly unwrap one parameter', async () => {
+    test('should default to empty filters', async () => {
       const queryCache = new QueryCache()
 
-      queryCache.findAll({
-        queryKey: ref(['baz']),
-      })
+      queryCache.findAll()
 
-      expect(QueryCacheOrigin.prototype.findAll).toBeCalledWith({
-        queryKey: ['baz'],
-      })
+      expect(QueryCacheOrigin.prototype.findAll).toBeCalledWith({})
     })
   })
 })

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

@@ -1,4 +1,4 @@
-import { onScopeDispose, reactive } from 'vue-demi'
+import { onScopeDispose, ref } from 'vue-demi'
 
 import {
   flushPromises,
@@ -26,7 +26,7 @@ describe('useQueries', () => {
     ]
     const queriesState = useQueries({ queries })
 
-    expect(queriesState).toMatchObject([
+    expect(queriesState.value).toMatchObject([
       {
         status: 'loading',
         isLoading: true,
@@ -57,7 +57,7 @@ describe('useQueries', () => {
 
     await flushPromises()
 
-    expect(queriesState).toMatchObject([
+    expect(queriesState.value).toMatchObject([
       {
         status: 'success',
         isLoading: false,
@@ -88,7 +88,7 @@ describe('useQueries', () => {
 
     await flushPromises()
 
-    expect(queriesState).toMatchObject([
+    expect(queriesState.value).toMatchObject([
       {
         status: 'error',
         isLoading: false,
@@ -105,7 +105,7 @@ describe('useQueries', () => {
   })
 
   test('should return state for new queries', async () => {
-    const queries = reactive([
+    const queries = ref([
       {
         queryKey: ['key31'],
         queryFn: getSimpleFetcherWithReturnData('value31'),
@@ -123,9 +123,9 @@ describe('useQueries', () => {
 
     await flushPromises()
 
-    queries.splice(
+    queries.value.splice(
       0,
-      queries.length,
+      queries.value.length,
       {
         queryKey: ['key31'],
         queryFn: getSimpleFetcherWithReturnData('value31'),
@@ -139,8 +139,8 @@ describe('useQueries', () => {
     await flushPromises()
     await flushPromises()
 
-    expect(queriesState.length).toEqual(2)
-    expect(queriesState).toMatchObject([
+    expect(queriesState.value.length).toEqual(2)
+    expect(queriesState.value).toMatchObject([
       {
         data: 'value31',
         status: 'success',
@@ -177,7 +177,7 @@ describe('useQueries', () => {
     const queriesState = useQueries({ queries })
     await flushPromises()
 
-    expect(queriesState).toMatchObject([
+    expect(queriesState.value).toMatchObject([
       {
         status: 'loading',
         isLoading: true,

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

@@ -197,10 +197,10 @@ describe('VueQueryPlugin', () => {
         })
 
         appMock._mixin.beforeCreate?.call(appMock)
+        const client = appMock._provided.VUE_QUERY_CLIENT as QueryClient
+        const defaultOptions = client.getDefaultOptions()
 
-        expect(appMock._provided).toMatchObject({
-          VUE_QUERY_CLIENT: expect.objectContaining(config),
-        })
+        expect(defaultOptions).toEqual(config.defaultOptions)
       },
     )
 
@@ -333,14 +333,14 @@ describe('VueQueryPlugin', () => {
       })
 
       expect(customClient.isRestoring.value).toBeTruthy()
-      expect(queries[0].isFetching).toBeFalsy()
-      expect(queries[0].data).toStrictEqual(undefined)
+      expect(queries.value[0].isFetching).toBeFalsy()
+      expect(queries.value[0].data).toStrictEqual(undefined)
       expect(fnSpy).toHaveBeenCalledTimes(0)
 
       await flushPromises()
 
       expect(customClient.isRestoring.value).toBeFalsy()
-      expect(queries[0].data).toStrictEqual({ foo: 'bar' })
+      expect(queries.value[0].data).toStrictEqual({ foo: 'bar' })
       expect(fnSpy).toHaveBeenCalledTimes(0)
     })
   })

packages/vue-query/src/useQueries.ts

@@ -4,14 +4,8 @@ import type {
   QueriesPlaceholderDataFunction,
   QueryKey,
 } from '@tanstack/query-core'
-import {
-  computed,
-  onScopeDispose,
-  reactive,
-  readonly,
-  ref,
-  watch,
-} from 'vue-demi'
+import type { Ref } from 'vue-demi'
+import { computed, onScopeDispose, readonly, ref, watch } from 'vue-demi'
 
 import type { QueryFunction, QueryObserverResult } from '@tanstack/query-core'
 
@@ -157,7 +151,7 @@ export function useQueries<T extends any[]>({
 }: {
   queries: MaybeRefDeep<UseQueriesOptionsArg<T>>
   queryClient?: QueryClient
-}): Readonly<UseQueriesResults<T>> {
+}): Readonly<Ref<UseQueriesResults<T>>> {
   const client = queryClient || useQueryClient()
 
   const defaultedQueries = computed(() =>
@@ -172,7 +166,7 @@ export function useQueries<T extends any[]>({
   )
 
   const observer = new QueriesObserver(client, defaultedQueries.value)
-  const state = reactive(observer.getCurrentResult())
+  const state = ref(observer.getCurrentResult())
 
   const unsubscribe = ref(() => {
     // noop
@@ -184,12 +178,12 @@ export function useQueries<T extends any[]>({
       if (!isRestoring) {
         unsubscribe.value()
         unsubscribe.value = observer.subscribe((result) => {
-          state.splice(0, result.length, ...result)
+          state.value.splice(0, result.length, ...result)
         })
         // Subscription would not fire for persisted results
-        state.splice(
+        state.value.splice(
           0,
-          state.length,
+          state.value.length,
           ...observer.getOptimisticResult(defaultedQueries.value),
         )
       }
@@ -201,7 +195,7 @@ export function useQueries<T extends any[]>({
     defaultedQueries,
     () => {
       observer.setQueries(defaultedQueries.value)
-      state.splice(0, state.length, ...observer.getCurrentResult())
+      state.value.splice(0, state.value.length, ...observer.getCurrentResult())
     },
     { deep: true },
   )
@@ -210,5 +204,5 @@ export function useQueries<T extends any[]>({
     unsubscribe.value()
   })
 
-  return readonly(state) as UseQueriesResults<T>
+  return readonly(state) as Readonly<Ref<UseQueriesResults<T>>>
 }