useQueries not working when array of query options is computed (dynamic number of queries)
See original GitHub issueHello, 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
Issue Analytics
- State:
- Created 2 years ago
- Comments:9 (4 by maintainers)
Top Results From Across the Web
Infer query options for useQueries when using array function ...
Using the generic, the options are typed correctly. I created a small CodeSandbox that shows this behavior.
Read more >useQuery | TanStack Query Docs
This option can be used to transform or select a part of the data returned by the query function. It affects the returned...
Read more >react-query: Refetch Query only if the state variable is changed
But, I am using react-query library. so that, it is not allowed to use useQuery inside useEffect . As A result, the request...
Read more >Local-only fields in Apollo Client - Apollo GraphQL Docs
This initializes a reactive variable with an empty array (you can pass any initial value to makeVar ). Note that the return value...
Read more >Samples for Kusto Queries - Azure Data Explorer
Screenshot of a column chart that depicts the number of sessions, ... The table isn't used for anything other than for mv-expand to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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.
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.