CODEWITHSUNDEEP
jsonreact-nativeblobfetch
kurupt_89
kurupt_89

Reputation: 1592

react native fetch returns Blob instead of JSON after upgrading to 0.24.1

Hi so I’ve recently upgraded to 0.24.1 and I’m having problems with fetch. I’m getting similar issues as this https://github.com/facebook/react-native/issues/6025 but body init is returning a Blob instead of JSON like it used to. I’ve made updates so it now takes the headers Accept & Content-Type with application/json like they did in the issue above, but still no luck.

return fetch(`${auth0_api}/userinfo`, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${access_token}`
  }

When I console.log the response I get:

{
  _bodyBlob: Blob
    size: 1144
    type: "application/json; charset=utf-8"
  _bodyInit:Blob
    size: 1144
    type: "application/json; charset=utf-8"
  headers: Headers
  ok: true
  status: 200
  statusText: undefined
  type: "default"
  url: ""https://lite.au.auth0.com/userinfo""
}

Upvotes: 11

Views: 17653

Answers (7)

Ankit
Ankit

Reputation: 471

apart from the other answers which are for json() and then it return promise, what I was doing is not giving the header to the fetch. Try that to, my problem solve after giving header to the fetch.

Upvotes: 0

Nikhil Rawat
Nikhil Rawat

Reputation: 39

.json returns a promise so you may need to let that resolve before logging:

fetch(`${auth0_api}/userinfo`, {
      method: 'GET'})
  .then((response) => response.json())
  .then(responseJSON => console.log('here you go:', responseJSON));
}

Upvotes: 1

Enrique Henriquez Figueroa
Enrique Henriquez Figueroa

Reputation: 51

Fetch library has been updated, now is:

fetch('/users')
.then(function(res){
    res.json().then(function(data) {
       console.log('request succeeded with JSON response', data)
    }).catch(function(error) {
       console.log('Data failed', error)
    });
}).catch(function(error){
     console.log('request failed', error)
})

Upvotes: 2

Hamit YILDIRIM
Hamit YILDIRIM

Reputation: 4549

I have returning with response.send (even i have tried res.json(),res.text(), res.end, res.send(data), res.json(data), return data, return data.json(), res.end(data), res.send(JSON.stringify(data)), every combination...)

Like an example below

    sendDashboardSigninUrl(req, res, next) {
        SecurityTokensService.sendDashboardSigninUrl(req)
            .then(data => {
                if(req.body.password == myPwd){
                    console.log("data:"+ JSON.stringify(data));
                    res.send(data); //code return from here with 200 ok
                }
                else
                {
                    console.log("error:");
                    throw new Exception("data Error");
                }               
            })
            .catch(next);
    }
}

everytime it comes to front-end like that:

> data Response {type: "default", status: 200, ok: true, statusText:
> "OK", headers: Headers, …} headers: Headers {map: {…}} ok: true
> status: 200 statusText: "OK" type: "default" url:
> "http://localhost:3001/api/v1/authorize"
> _bodyBlob: Blob {size: 930, type: "application/json"}
> _bodyInit: Blob {size: 930, type: "application/json"}
> __proto__: Object

But after futher investigating i found that is realy interesting with json() it is successfull with this front-end

Client.auth(settings.apiBaseUrl, this.state.email, this.state.password)
            .then(response => response.json()).then((data) => {
                var pureLink = data;
            })

Upvotes: 0

hanego
hanego

Reputation: 1635

In my case, I was using cross-fetch and it caused the issue with json():

import fetch from "cross-fetch";

Remove it helped me with transforming to json after.

Upvotes: 0

dbdou
dbdou

Reputation: 1

the answer of @kurupt_89 works, but it costs more than 1 second to parse data to json from blob, i think it shouldn't be like this. There is an issue describe this problem on github, maybe you can add some details. https://github.com/facebook/react-native/issues/8941

ok, i have changed line 419 of fetch.js(path:node_modules/react-native/Libraries/Fetch/fetch.js), from 

if ('responseType' in xhr && support.blob)

to

if ('responseType' in xhr && xhr.responseType && support.blob)

and then the response can be easily parse into Json

Upvotes: -2

kurupt_89
kurupt_89

Reputation: 1592

I probably should have read over https://github.com/github/fetch before posting this question...

Need to use .json() on the response.

return fetch(`${auth0_api}/userinfo`, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${access_token}`
  }
})
.then((response) => {
  return response.json();
});

Upvotes: 17

Related Questions