I have a react based web app which retrieves data from Jenkins APIs. During the ponentDidMount() function I'm calling the first API which starts the API calling flow. Then I will render the ponent with the data from the API.

The Jenkins server starts building each project at 7.00am every day. Therefore I want to call these APIs from React around 8.00pm everyday.

Can we schedule React to call these APIs and get it's updated data as previously mentioned during a specific time of the day? Or refresh browser etc which results in new API data? I'm new to React so appreciate your suggestions to achieve this.

I have a react based web app which retrieves data from Jenkins APIs. During the ponentDidMount() function I'm calling the first API which starts the API calling flow. Then I will render the ponent with the data from the API.

The Jenkins server starts building each project at 7.00am every day. Therefore I want to call these APIs from React around 8.00pm everyday.

Can we schedule React to call these APIs and get it's updated data as previously mentioned during a specific time of the day? Or refresh browser etc which results in new API data? I'm new to React so appreciate your suggestions to achieve this.

• javascript
• reactjs
• api
• typescript
• jenkins

Share Improve this question Follow edited Jan 18, 2018 at 13:00 Karl Taylor 5,28944 gold badges3939 silver badges6565 bronze badges asked Jan 15, 2018 at 12:03 channaechannae 1,01111 gold badge1414 silver badges2828 bronze badges 5

• Simply use setTimeout within your ponent. – Oro Commented Jan 15, 2018 at 12:08
• I guess a better suggestion would be setInterval, which would allow you to retrieve the data on a set interval rather than just once – Andrei Matracaru Commented Jan 15, 2018 at 12:13
• @AndreiMatracaru Perhaps setTimeout() for the timespan until 8pm, then setInterval() for 24h ;) – Oro Commented Jan 15, 2018 at 12:22
• @channae, Did the solution below work for you? If so, please consider marking my answer as "accepted" and/or by giving it an up-vote to show that it was useful. Thanks – Chris Commented Jan 16, 2018 at 9:10
• @Chris I tried this unfortunately this didn't work. I tried putting a console.log and it didn't trigger. Also there were no logs in the browser's developer console. – channae Commented Jan 18, 2018 at 11:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

You correctly use your API calls within ponentDidMount(). You can use setTimeout() on mount to wait until 20:00 and and trigger that event again with setInterval() every 24 hours after that.

So like:

ponentDidMount() {
  const currentTime = new Date().getTime();  //current unix timestamp
  const execTime = new Date().setHours(20,0,0,0);  //API call time = today at 20:00
  let timeLeft;
  if(currentTime < execTime) {
    //it's currently earlier than 20:00
    timeLeft = execTime - currTime;
  } else {
    //it's currently later than 20:00, schedule for tomorrow at 20:00
    timeLeft = execTime + 86400000 - currentTime
  }
  setTimeout(function() {
    setInterval(function() {

      //your code

    }, 86400000);  //repeat every 24h
  }, timeLeft);  //wait until 20:00 as calculated above
}

In other words, it will:

1. Calculate the time difference between now and next 20:00 o'clock.
2. Wait until 20:00 with setTimeout().
3. Set a trigger for exactly 24 hours (i.e 86400000 ms) to repeat the code inside setInterval().

This will work no matter when you start your React app.