1

Eu tenho o seguinte hook que executa as chamadas a API sem problema, retornando as informações e atualizando os componentes normalmente, mas ele traz alguns erros de conexão no console, creio que esses erros acontecem quando executo a aplicação antes de retornarem as respostas da API, mas como estou usando async await não entendo porque os erros estão ocorrendo, alguém consegue me ajudar com isso:

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 };

inserir a descrição da imagem aqui

9
  • Qual a response dessas requisições de status 404? É um json válido? Commented 12/08/2020 às 16:07
  • Estava retornando uma string, eu alterei o controller para retonar um json mas deu o mesmo problema Commented 12/08/2020 às 17:25
  • Mas existe algum motivo para esta rota ter status 404 (ou algum status de erro)? É normal o navegador printar erros de requisição no console. Commented 12/08/2020 às 17:31
  • Alterei o post e coloquei o código do controller. Pelo erro dá pra notar que a primeira requisisão chamada findPeriods não dá nenhum erro, mas todas as outras que retornam string dão erro, apesar de estarem funcionando. O que vem do banco nesses três casos é number Commented 12/08/2020 às 17:49
  • As outras três requisições dependem da primeira, se eu executasse na sequencia acho que não daria erro, mas como tá em um hook creio que ele tenta executar antes de ter o paramentro disponível. Tenho que pensar em uma forma de elas aguardarem o resultado de findPeriods Commented 12/08/2020 às 18:06

1 Resposta 1

2

Baixei o seu projeto e tentei debuggar esse problema. Como não tenho acesso ao banco, o app não starta e meu diagnóstico pode não estar 100% correto, mas aqui temos as seguintes possíveis causas:

  1. FinancesRouter.js

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

    Essas rotas não dão match quando period é uma string vazia, conforme mostra-se no seu screenshot e conforme eu verifiquei ser a primeira requisição que ocorre quando o componente monta. Evite chamar a API com este parâmetro em branco. Para verificar se é isso mesmo, teste com uma data não-vazia e verifique se o status code é 200.

  2. A porta da API nos seus prints é a 3000, comumente a porta utilizada pelo Create React App. No entanto, se este fosse seu problema, haveria outro status code (437 para mim). Verifique se isto está correto.

3
  • Valeu pela dica Rodrigo, coloquei um parâmetro fixo em cada rota e os erros sumiram. Vou colocar umas condições pra só executar quando tiver o dado vindo da primeira requisição. Commented 13/08/2020 às 1:32
  • Que bom que funcionou. Como o problema na verdade era no node/express, vou colocar essas tags na pergunta. Commented 13/08/2020 às 4:41
  • 1
    Na verdade eu não mudei nada no node, só criei um if no hook pra só executar as requisições quando o parâmetro existir. Mas é melhor alterar as tags mesmo. Commented 13/08/2020 às 13:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .