I'm looking for some opinions to implement a 'silent' fetch from a given data endpoint.
Currently I have an implementation to fetch data on component init as you would expect
//apiService.ts
getData(params): Promise < Member[] > {
return this.httpService.doRequest(`${this.baseUrl()}/member`, 'get', convertToQueryParams(params), null);
}
//component.ts
this.apiService
.getData(params)
.then((response: any) => {
const responseData: Member[] = response.data
this.data = responseData.map(member => new Display(member))
})
.catch(e => console.log('error occured while fetching table data. Try again: ', e))
After this I would like to implement a silent refresh on the same getData endpoint which fetches the data every 5 minutes and silently paints the page with new data without user realizing the data was updated. This also means not showing any sort of loading or refresh behavior on the page for this silent fetch.
My organization currently uses angular 7 but we plan to upgrade to angular 12 this year. Any ideas or suggestions would be appreciated.
Since you are working in Angular, you can always use observables. I see you are using a promise but retuning an observable is a quick fix. You can use the timer function which will do exactly what you want: https://www.learnrxjs.io/learn-rxjs/operators/creation/timer
Another option is to use setInterval and save its reference so you can cancel it when a component is destroyed. https://developer.mozilla.org/en-US/docs/Web/API/setInterval