useQueries question

[NikitaVelixJob]

Hey!

How I can implement something like this but with pinia-colada

https://tanstack.com/query/latest/docs/framework/react/reference/useQueries#combine

Thank you 🙏

[NikitaVelixJob]

I have implement this only as custom fetching each id and then putting it in the queryCache myself. but is there any better way?

[posva]

Personally, I would put multiple useQuery() and combine the data with a computed, without any extra abstraction.

[NikitaVelixJob]

Thank you Posva!

But I can't come up with clear solution.
If I need to load 10 items with unique ids, how I make it If I only have 1 api route to get item/id?

And I cant know exact amount of items i need to load

[posva]

You can use defineQueryOptions with a fn and create a custom composable that gets the ids passed as parameters and loops to call use query

there are some edge cases for dynamic ids that can make it a bit more complicated

[simplg]

Thank you for the idea Posva!

If I understand correctly how useQuery is implemented, this would only work with static ids? It wouldn't be possible to use a ComputedRef of ids for the composable since useQuery declares watch functions.
Ideally, I would have liked to do something like this:

async function mockQueryFn(id) {
    return await (new Promise(res => {
        setTimeout(() => res({ id, ok: true}), 300);
    }));
}
const queryOption = defineQueryOption((id) => ({
    key: ["myQuery", id],
    query: mockQueryFn,
});
const ids = ref([])
const { datas, errors, isLoading } = useQueries(computed(() => ids.value.map(id => queryOption(id))))

I have this current implementation (which works for static queries):

function useQueries(queryOptions) {
    const queries = queryOptions.map(queryOption => useQuery(queryOption));
    return {
        datas: computed(() => queries.map(query => query.data.value)),
        errors: computed(() => queries.map(query => query.error.value)),
        isLoading: computed(() => queries.some(query => query.isLoading.value)),
    }
}

// example 
const { datas, errors, isLoading } = useQueries([queryOption(10), queryOption(20), queryOption(30)]);

But I don't see how, without doing a whole other hook by using part of the code from useQuery, I can use computed ids

[posva]

I need to document this more prominently, but one of the points of defineQueryOptions is that you can then pass it with a reactive getter to useQuery:

const route = useRoute()
const { state } = useQuery(documentByIdQuery, () => ({
  id: route.params.docId as string
}))

https://pinia-colada.esm.dev/guide/query-keys.html#Dynamic-typed-keys

In your case, if the options do not change, only the argument, then you can effectively use a simple map

[posva]

BTW it's better to open a new discussion