[vue] useQueries compat issue with vue v2

[stefanprobst]

Describe the bug

using useQueries with vue v2 logs "Vue 2 does not support readonly arrays" error to the console and fails to update state in this minimal example:

const queries = useQueries({ queries: computed(() => /** ... */ )})

const isLoading = computed(() => {
  return queries.some(query => query.isInitialLoading)
})

Your minimal, reproducible example

https://github.com/stefanprobst/issue-vue-query

Steps to reproduce

1. git clone [email protected]:stefanprobst/issue-vue-query

2. cd issue-vue-query

3. npm install && npm run dev

4. on http://localhost:3000 see that the loading state never updates

5. optionally, you can check out the vue3 branch and see that this is working correctly with vue v3

Expected behavior

useQueries should be compatible with vue v2.7

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: linux
• browser: firefox 107
• node: v18.12.1

Tanstack Query version

@tanstack/[email protected]

TypeScript version

No response

Additional context

No response

[DamianOsipiuk]

Hi You are correct. This is mentioned in the 2.7 release docs:

readonly() does create a separate object, but it won't track newly added properties and does not work on arrays.

There are two solutions to this problem:

• remove readonly wrapper from useQueries. This should be backwards compatible, but will open a possibility of cache mutation by user. Other hooks return objects so they should be good.

  This will allow for hard to detect bugs, where users would be able to mutate queryCache from withing the components. And this will happen as previously people opened bug reports that they cannot modify result of useQuery hook.

• return a readonly object with queries attribute. This is unfortunately not backwards compatible, but accoring to release docs should be changed.

  Avoid using arrays as root values in reactive() because without property access the array's mutation won't be tracked (this will result in a warning).

Neither of the solutions seems to be good. I would ideally wait for v5 and make the breaking change. But that might take a while.

[stefanprobst]

fixed by https://github.com/TanStack/query/pull/4934

[Jungho-Cheon]

@DamianOsipiuk Hi, Thank you for your hard work. Is it possible to release a patch version of v4?