"Stalled" timing taking too long when fetching data while using mongoose propery "find()" using react

Question

I hope you could please help me with this.

I am building a webapp with the ReactJS framework.

I am trying to fecth data as soon as I get to the menu "Active Orders"

BACKEND is what follows Mongoose properties I am using are the following:

module.exports.getArticleByOrderId = (req, res, next) => {

  console.log("REQ CURRENTUSER ID----->>", req.currentUser);

  Order.find({ clientId: req.currentUser, status: "iniciado" })
    .then((order) => {
      //console.log("el order que encuentra es este ===>>>", order[0].id)

      if (order) {
        Article.find({ orderId: order[0].id })
          .populate("productId")
          .then((article) => {

            console.log("ha encontrado el ARTICLE ---->>>>", article)

            res.status(200).json(article);
          })
          .catch((error) => {
            console.log("Error", error);
            return res.status(404).json({
              msg: "Error al buscar todos los ARTICULOS",
            });
            next();
          });
      } else {
        console.log("No existe este PEDIDO");
      }
    })
    .catch((error) => {
      console.log("Hay error getArticleByOrderId", error);
    });
};

Then the route is the following (I am using axios):

router.get('/orders/getArticles', authMiddleware.isAuthenticated, orderController.getArticleByOrderId);

FRONTEND: I am using a service called OrderServices:

export const getArticleByOrderId = () =>
  http.get("/orders/getArticles").then((res) => res);

and finally the REACT components:

import {
  createOrder,
  getArticleByOrderId,
} from "../../../services/OrderServices";

const OrderActive = () => {
  const [order, setOrder] = useState([]);
  const [orderTotal, setOrderTotal] = useState(null);
  const [orderId, setOrderId] = useState(null);
  const [address, setAddress] = useState([]);


  const {
    register,
    handleSubmit,
    watch,
    reset,
    formState: { errors },
  } = useForm();

  const fetchActiveUserOrder = useCallback(() => {
    getArticleByOrderId()
      .then((articlesFound) => {
        console.log("articles found --->>>", articlesFound)
        setOrder(articlesFound);
    
        getOrderTotal()
          .then((total) => {

             console.log("el total es este --->>", total);
             setOrderTotal(total);

            getUserAddresses()
              .then((addresses) => {
                setAddress(addresses);
              })
              .catch((error) => {
                console.log("No hay Dirección");
              });
          }).catch((error) => {

            console.log("Error al encontrar productos", error);
          });
        console.log("Se ha encontrado la order", articlesFound);
        setOrderId(articlesFound[0].orderId);
      })
      .catch((error) => {
        console.log("Error al encontrar productos", error);
      });
  }, []);

  const onSubmit = (data) => {
    console.log("ONSUBMIT", data);

    setOrder("");
    setOrderTotal(0);

    createOrder({ id: orderId, addressId: data.addressId })
      .then((articles) => {
        fetchActiveUserOrder();
        console.log("La orden ha sido procesada correctamente", articles);
      })
      .catch((error) => {
        console.log("Error al encontrar productos", error);
      });
  };

  useEffect(() => {
    fetchActiveUserOrder();
  }, [fetchActiveUserOrder]);

  return ( --- all the HTML code ---)

The problem is that the query "Stalled Timi" takes too long, around 13 seconds. But if I manually reload the page it brongs in miliseconds the info.

Here is what the googleCrome Inspector shows:

Stalled timing too long

Is there any way to minimize the time? I don't understand whi it is taking too long, I have very similar code in other screens and they do not take not even a second to do it. The database has less than 10 objects...

Thanks in advance!!

I have tried to separate the fetchAddresses in another callback from the fetchActiveUserOrder, but still it's taking too long to bring ONLY the orders...

"Stalled" timing taking too long when fetching data while using mongoose propery "find()" using react

0 Answers0