I have a create-react-app (CRA) using Node and React and Express.
When the user logs in, it will initiate React context like this:
initiateContext = async () => {
const promises_1 = [
this.getBreakthrus(), //check done
this.getBadges(), //check done
this.getChapter(), //check done
]
const promises_2 = [
this.getContext(), //check done
this.getTeam(), //check done
this.getTeams(), //check done
this.getTeamData(), //check done
this.getFacilitators(), //check done
this.getNextQuestion(), //check done
]
await Promise.all(promises_1)
await Promise.all(promises_2);
this.setLobbyView("profile")
}
These functions load all the data for the application, and initiate the lobby view for the user.
The Problem: When the user is using a VPN connection, sometimes the context data doesn't load. However, the lobby view does load, so the user sees the lobby, but all the data is empty.
How can I make this function more flexible, to handle network failures / retries?
It looks like your actual issue is a race condition. Your code should be:
initiateContext = async () => {
await Promise.all([
this.getBreakthrus(), //check done
this.getBadges(), //check done
this.getChapter(), //check done
]);
//this will now run AFTER the above
await Promise.all([
this.getContext(), //check done
this.getTeam(), //check done
this.getTeams(), //check done
this.getTeamData(), //check done
this.getFacilitators(), //check done
this.getNextQuestion(), //check done
]);
this.setLobbyView("profile");
};
Also, semi-colons matter