useQueries not working when array of query options is computed (dynamic number of queries)

Hello, its me again

So, here’s something I was trying with useQueries. I am trying make useQueries work with dynamically created query options. This will let me call todos for multiple ids which are dynamically passed to the hook.

function useMultipleTodos() {
  const ids = ref([]);
  const queries = computed(() => ids.value.map((id) => ({
    queryKey: ['post', reactive({ id })],
    queryFn: todoFetcher(id),
    enabled: !!id,
  })));
  const queryResults = useQueries(queries.value);
  return reactive({
    queryResults,
    ids,
    queries,
    fetch: (_ids) => { ids.value = _ids; }
  });
}

and in the component I would use it something like this

export default defineComponent({
  name: "App",
  components: { VueQueryDevTools },
  setup() {
    useQueryProvider();
    return {
      multipleTodos: useMultipleTodos(),
    };
  },
  methods: {
    onFetchMultipleTodos() {
      this.multipleTodos.fetch([1,2,3]);
    }
  }
});

Now, when my onFetchMultipleTodos method is called, it calls fetch method and fetch method sets ids ref to [1,2,3]. This in turn makes a change in queries computed. But, still queries are not called, nothing in the vuequery dev console.

Here’s the link to the repo which reproduces this in our basic-vue-2 example. https://github.com/onkarj422/reproduce_use_queries

[DamianOsipiuk]

@onkarj422 Issue should be fixed in https://github.com/DamianOsipiuk/vue-query/releases/tag/v1.7.1 You can check it out at https://codesandbox.io/s/magical-pasteur-hd6jj?file=/src/App.vue

In case it does not work for you, feel free to reopen the ticket.

[DamianOsipiuk]

Hmm. I will take a look at this after next week. Since I don’t have access to PC right now.

In the mean time you could try to reproduce the same thing with react and react-query and check whether it’s a limitation there as well or it’s a bug on vue-query side.