UseQueries not working with refs in Vue.

[liangliao-igc]

Describe the bug

Thanks for your great work!

UseQueries is not working while a vue ref changes:

https://codesandbox.io/p/devbox/eager-marco-y3q4ty?file=%2Fsrc%2FPosts.vue%3A34%2C28

Can the queries parameter watch some refs, for example, we need to do some business logic to check if we need to use useQueries?

Thanks!

Your minimal, reproducible example

https://codesandbox.io/p/devbox/eager-marco-y3q4ty?file=%2Fsrc%2FPosts.vue%3A34%2C28

Steps to reproduce

In the file posts.vue, line 34 seems not working.

Expected behavior

The ref can be watched, if it chagnes, call the queryFn.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

latest

Tanstack Query adapter

vue-query

TanStack Query version

latest

TypeScript version

No response

Additional context

No response

[DamianOsipiuk]

There a couple of issues with your code:

• code in setup is run only once, meaning data will be empty initially
• you cannot just change the argument to useQueries with ternary due to the same reason
• you should use computed to construct useQueries array and pass it directly to useQueries hook

[liangliao-igc]

Thank you for your quick reply.

Is the code below the correct way to handle that? If not, why?

Or can you provide an online reproducible example?

I checked the doc: https://tanstack.com/query/latest/docs/framework/vue/guides/dependent-queries#usequeries-dependent-query, and couldn't figure out how to use it.

const users = ref([])

const queries = computed(() => users.value.map(user => ({
    queryKey: ['post', user.id],
    queryFn: () => fetchPost(user.id),
  }))

const results = useQueries({
  queries: queries.value
})

Thank you!

[DamianOsipiuk]

Modified your sandbox: https://codesandbox.io/p/devbox/sleepy-satoshi-w2mwpt

Feel free to open the MR to update the docs, as it's definitely a copy of the react docs.
Basically Example2 override is missing.

[liangliao-igc]

Thank you for your explanation! It works now. 👍