Where is fetched data saved in React?

Question

I am trying to understand this snipped of code at an intrinsic level:

fetchAllData(){
    fetch('http://ec2-x-x-xx-xx.xx-west-x.compute.amazonaws.com:3001/', {mode: "no-cors"})
    .then(res => {
        return res.json();
    })

to better understand a simple component like this:

componentDidMount() {
    this.fetchAllData();
}

fetchAllData(){
    fetch('http://ecx-x-x-xxx-xx.xx-west-x.compute.amazonaws.com:3001/', {mode: "no-cors"})
    .then(res => {
        return res.json();
    })
    .then(resJson => {
        this.setState(prevState => {
            return{
                fetchDataLoaded: true,
                fetchData: resJson.data.todolist,
            };
        });
    });
}

• When fetching from an API, is the data stored temporarily in the res => function and chained on using .then ?
• If so, how could I visualise (in the console maybe?) the properties of the data fetched?

I find myself in a position where I need to manipulate data pulled from an API I don't know the shape of.

I am new to React and any detailed explanation would help a lot, thank you.

Answer 1

This isn't a react thing at all, but rather plain javascript and promises. fetch returns a resolved promise. The response isn't "saved" in res, per se, but rather is passed to a function where you've named the parameter res . If you want to view the raw response res you can do that in the first chained then , ensuring you still return the json promise for the next thenable.

fetch('http://ec2-3-8-196-93.eu-west-2.compute.amazonaws.com:3001/', {mode: "no-cors"})
  .then(res => {
    console.log('res', res);
    return res.json();
  })

Perhaps it would be a little clearer broken down a bit. Factor out the anonymous inline function into a named one, and pass that as the thenable callback. The fetch result isn't really saved anywhere (it is technically in memory in the browser heap, but that's another topic) and is just being passed to a function.

const logResultAndReturnJson = result => {
  console.log('result', result);
  return result.json();
};

fetch('http://ec2-3-8-196-93.eu-west-2.compute.amazonaws.com:3001/', {mode: "no-cors"})
  .then(logResultAndReturnJson)

If you need to manipulate the fetched data, then you likely want to look at the resolved JSON object and not the response object.

Answer 2

In the given example, the variable resJson contains the response body parsed by JSON(ie this piece of code only works if the API returns a JSON response).

Adding on to @drew, This .then(...).then(...) is called Promise Chaining. It is a useful way of making a flow where you can process data in stages and then deal with errors in the end.

As Reference, these two pages will surely help

1. promise-basics
2. promise-chaining