useQueries for running multiple dynamic disjoint queries that populate different cache keys

[segevfiner]

If I have a component that has a computed/dynamic array of items to fetch, where each one has its own cache key and I don't want to materialize a separate component for each query, I'm currently stuck, as there doesn't seem to be an appropriate composable that can take an array of queries that dynamically change an activate/deactivate them at runtime from that single composable call.

useQuery can't otherwise be used outside of setup context being a composable so I can't just call it dynamically from some other effect or event without some hack around that.

useInfiniteQuery seems only appropriate when it's just one cache key/array of data that dynamically expands, rather than a bunch of disjoint queries.

Hit this with a tree component where I need to fetch the data dynamically depending on the expanded nodes reported by the component.

[posva]

#180

I don't want to materialize a separate component for each query

Using a component is great, it relies on Vue and its existing lifecycle, it probably is what you need

[segevfiner]

But how would I handle this with a component like this: https://primevue.org/tree/, Do I just need to add an empty/functional components just for calling useQuery in a loop? Wouldn't it be easier if there was something builtin for this?

[segevfiner]

Basically it's the case of how to correctly load and handle hierarchical data, and there might be a better way entirely than just multiple useQuery, I'm just not sure how...

[posva]

Tree should expose a way to render through slots, it might just not be the right component

[segevfiner]

It does have a way. BUT, it needs the full tree as a prop of the root component, so even I'm not sure what I can put in a sub-component rendered in a slot to make this work.

[posva]

What I mean is: build your own Tree component that uses components instead of a prop.
useQueries() is just the wrong abstraction layer, it's comfortable because you have this Tree component that only accepts props

[segevfiner]

Rolling my own tree is exactly what I was trying to avoid, getting this kind of component right proved to be a major issue in the past, leading us to a major rabbit hole of performance issues and bugs... Especially with a recursive design instead of one tree component that handles render all the tree nodes via templates...