Netlify Functions + axios Get not working in production

Support
1

Hi all!
This is my situation, I’ve been stuck on this for weeks, would be really grateful for some help.

I have a Nuxt.js site deployed on netlify. I use netlify functions to get data from an external API (using axios), and then the data is displayed back in the UI.

The function call works perfectly in POSTMAN, and when I use ‘netlify dev’ on localhost:8888.

image
image1265×757 154 KB

But, when I deploy to production, however, the functions does not produce a response.

image
image1267×695 52.4 KB

I’ve tried to track down where and how it is getting lost, but still haven’t found the reason.

Here is the function in question:

require('dotenv').config();
const { NEWS_TKN, ISSUES_URL } = process.env;
const axios = require('axios');
const FormData = require('form-data');
var result = null;

exports.handler = async (event) => {
  const data = new FormData();
  const config = {
    method: 'get',
    url: ISSUES_URL,
    headers: {
      Authorization: `Token ${NEWS_TKN}`,
      ...data.getHeaders(),
    },
  };

  try {
    await axios(config)
      .then(function (response) {
        result = JSON.stringify(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  } catch (error) {
    return {
      statusCode: 422,
      body: `Error: ${error}`,
    };
  }
  return { statusCode: 200, body: result };
};

And in my nuxt.config:

publicRuntimeConfig: {
    axios: {
      baseURL:
        process.env.NODE_ENV === 'production'
          ? process.env.BASE_URL || 'http://localhost:8888/'
          : 'http://localhost:8888/',
    },
  },

Would be really grateful for any help/ answers - it’s been driving me crazy for a while now.

Thanks! :slight_smile:

2

Hi @ambim,

Getting Functions do async tasks can be tricky, but what usually works for me is the following format:

return axis(config).then(response => {
  return {
    statusCode: 200,
    body: JSON.stringify(response.data)
  }
}).catch(error => {
  console.log(error)
  return {
    statusCode: 422
    body: `Error: ${error}`,
  }
})

Basically, instead of using the async keyword, the return statement does the trick. Could you try this and let us know if it works?

Do note that, we do not actually provide help with custom code as that’s beyond the scope of support, but this was a small change and could possibly work.

1 Like
3

You are using a promise chain inside a try catch, this is redundant.

A try / catch block

try {
  const response = await axios(config)
  return JSON.stringify(response.data)
} catch (error) {
  return {
    statusCode: 422,
    body: `Error: ${error}`
  }
}

Is sugar that is compiled into a promise chain

axios(config)
  .then(function (response) {
    return JSON.stringify(response.data)
  })
  .catch(function (error) {
    return {
      statusCode: 422,
      body: `Error: ${error}`
    }
  }
})

In other words, you only need one of the two, while you have implemented a promise chain into a try / catch, a combination of both.

4

Hey @hrishikesh & @freddy thanks for taking the time to respond. I have changed the formatting of the axios statement as you (both) suggested, but this didn’t fix the problem, unfortunately.

I don’t think it’s a problem with the axios function, like I mention, it’s works fine locally. Therefore, I think it’s something to do with understanding the flow of data from external api’s, through a netlify function to the UI.

I will keep trying new things…

5

Hard to say, the reason it works “some times” is because of

.then(function (response) {
        result = JSON.stringify(response.data);
})

You’re setting the data, but it’s not waiting for it. So some times it will set result, other times it will not, depending on how fast things run.

const result = axios(config)
  .then(function (response) {
    return JSON.stringify(response.data)
  })
  .catch(function (error) {
    return {
      statusCode: 422,
      body: `Error: ${error}`
    }
  }
})

The following code snippet does the same, but it ensures that result always contains the response, that be the JSON parsed data, or the error.