I'm scaling an app that I didn't make myself and I have little experience with React and none with graphql, so even obvious things are difficult for me, so I'm asking for the help of the community to review where I'm going wrong in my code. We bring information array with graphql
and show in table. Previously, the query was like this:
query listarRutas($sort: String, $limit: Int, $start: Int, $where: JSON){
rutas(sort: $sort, limit: $limit, start: $start, where: $where){
id
ubicacion{
id
nombre
}
nombre
descripcion
inicio
fin
activo
puntos(sort:"id:asc"){
id
lat
lng
}
}
}
But now I must add this field:preciourbano
query listarRutas($sort: String, $limit: Int, $start: Int, $where: JSON){
rutas(sort: $sort, limit: $limit, start: $start, where: $where){
id
ubicacion{
...
preciourbano
}
nombre
...
}
I know that the query is well done because in the console it shows me the information:
Next, I show the table where the information is extracted from JSON
and it marks me that the field is preciourbano
NOT defined when it JSON
appears as 1.
I am sure that the error is in the following functions that I will put, but I have thought about it so much and I cannot find it. To start with, there is a function called RutaSelect
which is where my graphql query is stored and it outputs the following to the table:
const AgregarRutasShoppingCart =(rutasSeleccionadas)=>{
let arrayObjectRutas =[];
for (let index = 0; index < rutasSeleccionadas.length; index++) {
const element = rutasSeleccionadas[index];
let rutaObject={
id: parseInt(element.value.id),
nombre: element.value.nombre,
descripcion: element.value.descripcion,
fecha_inicio : fecha,
fecha_fin: fecha,
inicio: element.value.inicio,
fin: element.value.fin,
puntos: element.value.puntos,
cantidad:1,
precio:element.value.preciourbano
};
arrayObjectRutas.push(rutaObject);
}
addProductRuta(arrayObjectRutas);
}
That is the function that sends to the context where the table shown above is "painted", which receives the following to be able to fill the fields:
//ciclo para rutas
for (let index = 0; index < element.rutas.length; index++) {
const elementR = element.rutas[index];
sumaToArrays=sumaToArrays+1;
let rutasObject = {
id:elementR.id,
nombre:elementR.nombre,
descripcion:elementR.descripcion,
inicio: elementR.inicio,
fin: elementR.fin,
cantidad: 1,
descuento: 0,
preciourbano: elementR.preciourbano,
fecha_inicio:fecha,
fecha_fin:fecha,
puntos:elementR.puntos
};
rutastemp.push(rutasObject);
}
objectProducts.push({
etiqueta:element.etiqueta,
sitios:sitiostemp.sort((a,b)=> a.clave.localeCompare(b.clave)),
rutas:rutastemp.sort((a,b) => a.nombre.localeCompare(b.nombre)),
lat:element.circulo.center.lat(),
lng:element.circulo.center.lng(),
radio:element.circulo.radius
});
}
setProductsArr(objectProducts);
setCount(sumaToArrays);
}
And finally, this is the input where it should be seen (I add the input of Cantidad
and Descripción
that do work for me, so that they can be compared):
<InputText
type="number"
value={prod.cantidad}
required={true}
onChange={e=>{
prod.cantidad=e.target["value"];
setCantR(e.target["value"]);
UpdateCantidaditemsRutas2(e);
}
}
style={{width: "80%", borderRadius: "25px" }}
>
<InputText
style={{border:"0px",color:"black",textAlign:"center",width:"75%"}}
value={prod.preciourbano}
required={true}
>
<InputTextarea
rows={4}
style={{width:"100%",borderRadius: "25px",color:"black", resize: "none"}}
value={prod.descripcion}
/>
Thank you very much in advance for your answers.