Error in useEffect accessing API data

Question

I have the following hook that runs the API calls smoothly, returning the information and updating the components normally, but it brings some connection errors in the console, I believe these errors happen when I run the application before returning the API responses, but as I’m using async await I don’t understand why errors are occurring, someone can help me with this:

import { useEffect, useContext } from "react";
import FinancesDataService from "../services/FinancesService";
import { AppContext } from "../components/context/AppContext";

export const useDetails = () => {
  const { state, dispatch } = useContext(AppContext);
  const { selectedPeriod, profit, cost } = state;

  useEffect(() => {
    async function countTransactions() {
      const response = await FinancesDataService.countTransactions(
        selectedPeriod
      );
      dispatch({ type: "setCounter", payload: response.data });
    }
    countTransactions();

    async function getProfit() {
      const response = await FinancesDataService.getProfit(selectedPeriod);
      dispatch({ type: "setProfit", payload: response.data });
    }
    getProfit();

    async function getCost() {
      const response = await FinancesDataService.getCost(selectedPeriod);
      dispatch({ type: "setCost", payload: response.data });
    }
    getCost();

    function calcBalance(profit, cost) {
      return profit - cost;
    }
    dispatch({ type: "setBalance", payload: calcBalance(profit, cost) });
  }, [dispatch, selectedPeriod, cost, profit]);

  return {
    counter: state.counter,
    profit: state.profit,
    cost: state.cost,
    balance: state.balance,
  };
};

CONTROLLER:

const FinancesModel = require("../model/FinancesModel");

const findPeriods = async (_, res) => {
  try {
    const periods = await FinancesModel.distinct("yearMonth");
    res.send(periods);
  } catch (error) {
    res.send(error);
  }
};

const countTransactions = async (req, res) => {
  const period = req.params.period;
  try {
    const counter = await FinancesModel.countDocuments({ yearMonth: period });
    console.info(counter);
    res.send(counter.toString());
  } catch (error) {
    res.send(error);
  }
};

const getProfit = async (req, res) => {
  const period = req.params.period;
  try {
    const profit = await FinancesModel.aggregate([
      { $match: { $and: [{ yearMonth: period, type: "+" }] } },
      { $group: { _id: null, value: { $sum: "$value" } } },
    ]);
    res.send(profit[0].value.toString());
  } catch (error) {
    res.send(error);
  }
};

const getCost = async (req, res) => {
  const period = req.params.period;
  try {
    const cost = await FinancesModel.aggregate([
      { $match: { $and: [{ yearMonth: period, type: "-" }] } },
      { $group: { _id: null, value: { $sum: "$value" } } },
    ]);
    res.send(cost[0].value.toString());
  } catch (error) {
    res.send(error);
  }
};

module.exports = { findPeriods, countTransactions, getProfit, getCost };

Answer 1

I downloaded your project and tried to debug that problem. As I do not have access to the bank, the app does not starta and my diagnosis may not be 100% correct, but here we have the following possible causes:

1. Financesrouter.js

   app.get("/counter/:period", countTransactions);
   app.get("/profit/:period", getProfit);
   app.get("/cost/:period", getCost);
   

   These routes do not match when period is an empty string, as shown in your screenshot and as I have verified to be the first request that occurs when the component mounts. Avoid call the API with this parameter blank. To check if this is true, test with a non-empty date and check if the status code is 200.

2. The API port in your prints is 3000, commonly the port used by Create React App. However, if this were your problem, there would be another status code (437 for me). Make sure this is correct.