Angular 4 routes are calling ngOnInit every time component is loaded repeating API call

Question

I have a little webapp that basically lists a player list and when user clicks on the player name, it shows player details. It uses two api calls, one for list and other to load details of selected player. My problem is that when i go back from details route to home route the component executes ngOnInit again so it makes again the first api call to load the home list again, and i don't want this call again. This is my configuration:

routing.module.ts

...
export const routes: Routes = [
  {
    path: '',
    component: BioStatsComponent,
    resolve: {
      biostats: BiostatsResolverService
    }
  },
  {
    path: 'info',
    children: [
      {
        path: ':id',
        component: InfoComponent,
        resolve: {
          info: PlayersResolverService
        }
      }
    ]
  }
];
...

detail.component.ts

ngOnInit(){
...
this.playersinfo = this.route.snapshot.data['info'];
...
}

home.component.ts

ngOnInit(){
...
this.biostats$ = this.route.snapshot.data['biostats'];
...
}

detail-resolver.service.ts

...
resolve(route: ActivatedRouteSnapshot, rstate: RouterStateSnapshot): Observable<any> {
    const id = route.paramMap.get('id');
    return this.playerService.getPlayerCommonInfo(+id).catch((err: any) => of([err]));
  }
...

home-resolver.service.ts

constructor(private playerService: PlayersService) {}
  resolve(route: ActivatedRouteSnapshot, rstate: RouterStateSnapshot): Observable<any> {
    return this.playerService.getPlayerBioStats();
  }

score 0 · Accepted Answer · answered Feb 28 '19 at 04:08

0

You should make use of services. Call the api once and save it in variable let's say playerListData in a service. Now when you go back to list route, check if the data in that service is null or not. Let's say it's not null, you don't call the api and use playerListData directly. If it's null, then you are probably visiting the list route for the first time. In that case call the API. This way your api will be called only once when data is null in the service.

I am providing a loose implementation of how it will be.

ngOnInit() {
 if(this.service.playerListData!=null)
  {
    this.listData = this.service.playerListData;
  }
 else {
    this.listData =  callTheAPI();
}

Inside the service, you will have code something like,

this.playerListData = null;
callTheAPI(){
 code to call the api and get the data.
 this.playerListData = dataFromAPI;
}

answered Feb 28 '19 at 04:08

emkay

777
8
19

This is really the best way to do it? I think that it could be something that angular contemplates to do it not using a variable. All the information I have is people asking the opposite, they want to call ngOnInit every time, so i think it's me that I'm doing something wrong. – Sfrag Feb 28 '19 at 10:11
See how routing works in angular is that each time it lands a route it will reload the component if you are coming from the different route. So when component is loaded (after coming from your details component) again ngOnInit() is naturally called. Hence putting a method in ngOnInit() which calls the api will be called again. What is your though process? How are you thinking this could be done otherwise by you or angular? – emkay Feb 28 '19 at 10:20
Ok, ok, I see, I thought I was changing the path not the route, now I understand that path is the route. I read that when route changes ngOnInit is called but I thought it was not my case. I see people with similar configuration using state avoiding to load ngOnInit when go back to loaded component and this confuses me. – Sfrag Feb 28 '19 at 10:27

score 0 · Answer 2 · answered Feb 28 '19 at 10:29

0

"Angular 4 routes are calling ngOnInit every time component is loaded repeating API call" This is the way how angular working on its components. I don't understand what is the point of saving API response in a variable and reuse it after a revisit, I think you could miss the new updates in that player list next time if you are doing it.

answered Feb 28 '19 at 10:29

Ashraf Ali

43
5

In case data to be received is quite bulky it makes sense to save it and reuse it. As you rightly said updates can be missed. Again, it's matter of what is the size of data fetched from API? Is front end the only means through which data is updated in database? Is data read-only, no updates as such? Accordingly a strategy can be chosen. – emkay Feb 28 '19 at 11:15
1

Yes, you are right @emkay in my case this database is 3 seconds to load, it's a fixed database so why i need to spend so many time every time i come back from users details? this is my point. – Sfrag Feb 28 '19 at 12:05
Ok, on that case you can use an XML file of that data you don't need any table in the database for that data or an API call for that. – Ashraf Ali Feb 28 '19 at 12:31

Angular 4 routes are calling ngOnInit every time component is loaded repeating API call

2 Answers2

Linked