Why does my Firebase function successfully make an API request, but then timeout-CodePudding

I built a React web app that allows users the calculate their meal's nutrition.

Users enter an ingredient in the IngredientForm component, triggering the fetchFirebaseNutrition function.

const fetchFirebaseNutrition = (ingredientName) => {
    const axios = require('axios');

    const options = {
      method: 'GET',
      url: 'http://localhost:5001/nutrition-calculator-6db9d/us-central1/fetchAPINutrition',
      params: { ingredient: ingredientName },
    };

    return axios
      .request(options)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
        return setIsAPIConnectionDown(true);
      });
  };

fetchFirebaseNutrition makes a get request to to my Firebase function, fetchAPINutrition, with the relevant ingredient. Then, fetchAPINutrition makes a get request to an API for the nutrition data. I'm using the Firebase function to conceal the API key for when I deploy my web app.

exports.fetchAPINutrition = functions.https.onRequest((req, res) => {
  const axios = require('axios');
  const ingredient = req.query.ingredient;

  const options = {
    method: 'GET',
    url: 'https://calorieninjas.p.rapidapi.com/v1/nutrition',
    params: { query: ingredient },
    headers: {
      'X-RapidAPI-Host': 'calorieninjas.p.rapidapi.com',
      'X-RapidAPI-Key': process.env.REACT_APP_RAPID_API_KEY,
    },
  };

  return axios
    .request(options)
    .then((response) => {
      console.log(response.data);
      return response.data;
    })
    .catch((error) => {
      console.error(error);
    });
});

fetchAPINutrition works... kind of. When I make a request to the function from the front-end, I can see on the Firebase Emulator that fetchAPINutrition is successfully getting the data from the API. See the Firebase Emulator Logs. However, the function just times out afterwards. So, fetchFirebaseNutrition never receives the API data and just returns an Axios Network Error message.

How can I stop my Firebase function from timing out and return the API data to the front-end?

Any help would be immensely appreciated!

CodePudding user response：

HTTPS functions expect a return, which you don't. Instead, you are returning a promise without waiting for it to complete.

You need to return a result.

res.status(200).send(response.data);

In this case;

axios
.request(options)
.then((response) => {
  res.status(200).send(response.data);
})
.catch((error) => {
  console.error(error);
  res.status(500).send("Error");
});