Estoy haciendo una tienda en línea y quiero calcular el costo total de los productos en ella. El carrito se ve así: [{productId, count}, {productId, count}], y obtengo el costo del producto a través de una consulta por productId.

A continuación se muestra un ejemplo de cómo se ve la estructura ideal que me gustaría obtener, pero useQuery no se puede usar dentro de un mapa y useQuery es asíncrono. Ya probé varias formas de solucionar esto, pero fue en vano.

¿Me pueden decir cómo resolver este problema o hay otra manera?

 import {useQuery, useMutation} from "@apollo/client"; import {GET_PRODUCT_PRICE} from "../query/product"; export const GetTotalPrice = (cart) => { let totalPrice = 0; const {data, loading, error} = useQuery(GET_PRODUCT_PRICE, { variables: { id: productId } }); cart.map((product) => { const {data, loading, error} = useQuery(GET_PRODUCT_PRICE, { variables: { id: product.productId } }); totalPrice += data.getProduct.price * product.count; }) return totalPrice; }