Vue queries that are dipendent

[schgab]

Hello, i am wondering if this is correctly implemented. I have queries that all need to complete to calculate some values with the fetched data.

I came up with the following:

export const useValQuery = (fromToRequest: FromToRequest = {
    from: startOfYear(new Date()),
    to: endOfYear(new Date())
}, enabled: boolean = true) => {
    const valuesToRetrieve = ['1','2','3','4','5']
    return useQueries({
        queries: valuesToRetrieve.map((val:string) => {
            return {
                queryFn: () => callToSomeAxiosGet(fromToRequest,val),
                queryKey: [val, fromToRequest],                
                staleTime: 1000 * 60 * 10,
                refetchInterval: 1000 * 60 * 15,
                enabled: enabled
            }
        })
    })
}

export const useCalculatedVals = () => {
    const queries = useValQuery()
    return computed(() => {
        if(!queries.every(q => q.isSuccess)) {
            return
        }
        const data1 = counterQueries[0].data!
        const data2 = counterQueries[1].data!
        const data3 = counterQueries[2].data!
        const data4 = counterQueries[3].data!
        const data5 = counterQueries[4].data!
        const someCalculation = data1 * data2 * data3 * data4 * data5    //example
        return {
            someCalculation           
        }
    })
}

I looked at this discussion, but it seems that the code isn't necessarily for vue.