rerender after fetch POST and PUT request - reactjs

Question

I have an app that GET's data from a REST API. I am able to fetch the data. I also need to be able to POST data to the API and PUT edits to the API. My code is able to successfully perform all of these operations, however I need to refresh the page to see the submissions. The trouble I am having is with automatically rerender the page upon submissions. I know I either have to setState or refetch the API after the call. I do not know how to structure this though. Any suggestions?
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: [],
isLoaded: false,
}
this.editBeersLikes = this.editBeersLikes.bind(this);
this.addNewBeer = this.addNewBeer.bind(this);
}
seeBeers() {
return fetch("https://beer.fluentcloud.com/v1/beer/")//specify id number to show single beer ex. "https://beer.fluentcloud.com/v1/beer/99"
.then(response => response.json())
.then(responseJson => {
this.setState({
isLoaded: true,
dataSource: responseJson,
});
return responseJson;
})
.catch(error => console.log(error)); //to catch the errors if any
}
addNewBeer() {
fetch("https://beer.fluentcloud.com/v1/beer/", {
body: "{\"name\":\"\",\"likes\":\"\"}",//input beer name and like amount ex "{\"name\":\"Michelob Ultra\",\"likes\":\"-5\"}"
headers: {
"Content-Type": "application/json"
},
method: "POST"
})
console.log("Beer Added!");
}
editBeersLikes() {
fetch("https://beer.fluentcloud.com/v1/beer/99", {//must specify id number to edit a single beer's likes ex "https://beer.fluentcloud.com/v1/beer/99"
body: "{\"likes\":\"\"}", //input amount of likes to edit ex "{\"likes\":\"22\"}"
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
method: "PUT"
})
console.log("Likes Successfully Updated!");
}
componentDidMount() {
this.seeBeers();
//this.editBeersLikes(); //uncomment when you want to edit likes
//this.addNewBeer(); //uncomment when you want to add beers
}
render() {
return (
<div className="App">
<h1>What is in My Fridge?</h1>
<ul>
{this.state.dataSource.map(dataSource => {
return <li key={`dataSource-${dataSource.id}`}>{dataSource.name} | {dataSource.likes}</li>
})}
</ul>
</div>
);
}
}
export default App;

Answer 1

The easiest way is probably to re-fetch the data after you have successfully POSTed or PUT them to the server. That would also be the cleanest and least error prone way because you always get a fresh response from the server with the most recent set of data.
However, you could use a pattern that is often referred to as "optimistic ui", meaning that you keep two states: the current state and the state how it will look like if the server request is successful. You would then push the new or updated item to your dataSource state and show it in your UI but revert it to the old state from before the server request if the request fails.
The downside of the latter approach is that you sometimes don't know all the data (especially auto generated IDs or lastUpdated fields) without querying the server again.
So if you want a relatively easy, clear, and solid solution you can call this.seeBeers() after each POST/PUT request to receive an updated set of data.
Keep in mind that this might not always work as expected when you're using e.g. sharding or an elastic search layer for read operations as they might not be in sync directly after you finished the write operation. That's probably not relevant for you though, as that's usually only a challenge when working with large scale setups.