Setting up Promise for two API calls in UseEffect - reactjs

Question

const [activities, setActivities] = useState([""]);
const [contact, setContact] = useState();
const currentActivity = activities[0]
let contactId = currentActivity.contacts
useEffect(() => {
API.getActivities()
.then(res =>
setActivities(res.data)
).catch((err) => console.log(err))
API.getContact(contactId)
.then(res =>
setActivities(res.data)
).catch((err) => console.log(err))
}, []);
console.log(currentActivity)
console.log(contactId)
console.log(contact)
The first call sets the activity state which includes a contact id. I require the id to run the second call for the contact information. I believe I need to setup a promise but am getting stuck. When I run the code, the contact id does not return in time to pull the contact. Another solution could be to call all contacts and loop through to match the id returned by the contact. When I have tried that, the "contact" state returns undefined as well.

Answer 1

You are running both api calls "at the same time", so we can assume that you will never have the contactId defined at the moment of making the contacts call.
So basically you want to run the contacts call once you have a contactId, not before. For doing so, you can add an extra effect that will be run when contactId value changes.
Also note that in your snippet you are using setActivities instead of setContact after the contacts call.
This will fix said issues
const [activities, setActivities] = useState([""]);
const [contact, setContact] = useState();
const currentActivity = activities[0]
let contactId = currentActivity.contacts
useEffect(() => {
API.getActivities()
.then(res =>
setActivities(res.data)
).catch((err) => console.log(err))
}, []);
useEffect(() => {
// Do nothing when contactId is not defined
if(!contactId) return;
API.getContact(contactId)
.then(res =>
setContact(res.data) // I also modified this line. It was updating the activities in your snippet
).catch((err) => console.log(err))
}, [contactId]); // This effect will be run every time the contactId changes
console.log(currentActivity)
console.log(contactId)
console.log(contact)

Answer 2

let me know if this helps. I have not tested it, may be minor changes required.
useEffect(async() => {
const resActivities=await API.getActivities()
setActivities(resActivities.data)
const promises=resActivities.data.map(item=>API.getContact(item.contactId)) // assuming contactId property exists
const resp=await Promises.all(promises)
setContact(resp.flat())
}, []);

Answer 3

I created a couple of APIs on Wirespec to generate a response that you can test. You can use Wirespec to create your own APIs for free.
getRandomUser API:
https://wirespec.dev/Wirespec/projects/apis/Stackoverflow/apis/getRandomUserId
getRandomUser Response:
https://api.wirespec.dev/wirespec/stackoverflow/getrandomuserid
getUserDetails API:
https://wirespec.dev/Wirespec/projects/apis/Stackoverflow/apis/getUserDetails
getUserDetails Response:
https://api.wirespec.dev/wirespec/stackoverflow/getuserdetails?id=3
Here is the test code. Two solutions are provided:
let userDetails;
new Promise(function (resolve) {
let user = JSON.parse(httpGet("https://api.wirespec.dev/wirespec/stackoverflow/getrandomuserid"));
resolve(user);
}).then(function (user) {
userDetails = JSON.parse(httpGet("https://api.wirespec.dev/wirespec/stackoverflow/getuserdetails?id=" + user.id));
console.log("firstName: " + userDetails.firstName + ", lastName: " + userDetails.lastName);
});
// A shorter way and cleaner approach...
getUserDetails()
.then (function (userDetails) {
console.log("firstName: " + userDetails.firstName + ", lastName: " + userDetails.lastName);
});
async function getUserDetails() {
let user = await JSON.parse(httpGet("https://api.wirespec.dev/wirespec/stackoverflow/getrandomuserid"));
let userDetails = await JSON.parse(httpGet("https://api.wirespec.dev/wirespec/stackoverflow/getuserdetails?id=" + user.id));
return userDetails;
}
function httpGet(url) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
return xmlHttp.responseText;
}