0

I am trying out azure functions. I understood about the working of azure functions and necessary bindings for combining the functions with other azure services.

Scenario:

Posting JSON through request's body to azure functions. Store the JSON in documentDB and return the same JSON as response.

It works properly when invoking the api in azure console. And it also works in postman. But weirdly, It does not work in my react app.

Problem: response in react app

In the above image, as you can see, the response is returned by azure functions in react app. But the body is a ReadableStream object. There is also a locked property. I have tried in both function and anonymous authorisation level. Both gave the same results. I am puzzled about this problem.

My thoughts:

Should I have an object to read the stream object or is it the problem of authorisation. It works perfectly well in postman and in azure console but not in react app. What am I missing ?

Register(POST) Azure Function

This function gets some request body parameters and store it in documentDB using output bindings. Here is the code:

module.exports = function(context, req) {
    context.log('Node.js HTTP trigger function processed a request. RequestUri=%s', req.originalUrl);

    if (req.query.name || (req.body)) {
        let eventId = req.body.eventId;
        let name = req.body.name;
        let purpose = req.body.purpose;
        let dateArray = req.body.dateArray;
        let location = req.body.location;

        let eventObj = {
            "id": eventId,
            "name" : name,
            "purpose" : purpose,
            "dateArray": dateArray,
            "location": location,
            "attendees": []
        }

        context.bindings.outputDocument = eventObj;
        context.res = {
            // status: 200, /* Defaults to 200 */
            body: eventObj
        };
    }
    else {
        context.res = {
            status: 400,
            body: "Please pass a name on the query string or in the request body"
        };
    }
    context.done();
};

React (post to azure function)

This is an react-redux app. Below is the code for POSTing to azure function with some request body parameters. The output of this code. i.e the response is already shown in the screenshot where response body cannot be decoded. But for the same http call, both postman and azure console works fine.

export function registerEvent(eventId, name, purpose, dateArray, location, attendees) {
  return dispatch => {
    return fetch('https://letsmeetup-test1.azurewebsites.net/api/HttpTriggerNodeJS2', {credentials: 'omit',
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({'eventId': eventId, 'name' : name, 'purpose' : purpose, 'dateArray': dateArray, 'location': location, 'attendees': attendees})})
      .then(res => {
        if (res.status !== 200) {
          let status = res.status;
          console.log('error in posting event');
        }
        console.log("printing response from azure functions");
        console.log(res);
        return res.json();
      })
      .then(json => storeEventId(json))
  };
}
Lakshman Diwaakar
  • 7,207
  • 6
  • 47
  • 81
  • Could you please provide any key code snippets of your Azure Functions and React app's? – Gary Liu Oct 04 '16 at 06:18
  • @gary I have added the code samples. Please check it out. – Lakshman Diwaakar Oct 04 '16 at 07:25
  • Will you get the correct payload if you use `console.log(res.json());`? Maybe your issue is similar with http://stackoverflow.com/questions/36840396/react-fetch-gives-an-empty-response-body – Gary Liu Oct 04 '16 at 08:07
  • No Gary I have tried that too even before posting it here. I forgot to mention it in the edit. But as you said, as it works in postman and azure console, something screwing up the client react side. Will look into it. If you have any lead, let me know :) – Lakshman Diwaakar Oct 04 '16 at 10:51
  • What happens if you try to log `json` in your final `then` (right before `storeEventId(json)`? – brettsam Oct 04 '16 at 15:46
  • @gary and brettsam I was logging res. Json in a different function. Totally my mistake. It works well when used with res.json(). I need coffee. No strong coffee!! – Lakshman Diwaakar Oct 06 '16 at 00:30
  • If you had set the headers in the response from the azure function to `Content-Type: application/json` then it would not come in as a ReadableStream. (since inherently Azure Functions running on Node can't return streams). – search-learn Mar 15 '21 at 21:57

0 Answers0