Avoid making API calls in every ngOnInit() function

Question

Avoid making API calls in every ngOnInit() function

I am currently developing an Angular front-end for a web-based application. One of the challenges I am facing is that all sub-page drill downs, implemented as different Angular components, make identical API calls in the ngOnInit() method. This repetitive calling is causing performance issues as the user traffic increases. I am seeking a solution to cache this data so that it can be utilized across multiple pages, thereby reducing the number of API requests.

ngOnInit() {
    if (this.api.validInputParams()) {
        this.api.getLiveData().subscribe((response) => {
            // Perform page-specific functionality and filtering

        }, (error) => {
            // Any errors should be handled by the HttpInterceptor
        });
    }
}

angular typescript

Answer 1

Answer №1

To effectively leverage the API, integrate it once at the top level component and connect with sub pages using @Input(), establishing one-way data binding. Start at the top level component :

top-component.ts (initiate the API call and store the results in a variable)

public response;

ngOnInit() {
  this.api.getData().subscribe(response => this.response = response);

top-component.html (pass the data to the sub-page)

<app-children [response]="response"></app-children>

sub-page (access the data from the input)

@Input() response;

Answer 2

To effectively leverage the API, integrate it once at the top level component and connect with sub pages using @Input(), establishing one-way data binding. Start at the top level component :

top-component.ts (initiate the API call and store the results in a variable)

public response;

ngOnInit() {
  this.api.getData().subscribe(response => this.response = response);

top-component.html (pass the data to the sub-page)

<app-children [response]="response"></app-children>

sub-page (access the data from the input)

@Input() response;

Answer 3

Answer №2

One simple approach is to utilize 2-Way-DataBinding for passing them down easily. If that method isn't an option, a straightforward solution would be to store it in the local storage using

localStorage.setItem('data', JSON.stringify(yourData);

and for retrieval, you can utilize

yourData = JSON.parse(localStorage.getItem('data'));

Answer 4

One simple approach is to utilize 2-Way-DataBinding for passing them down easily. If that method isn't an option, a straightforward solution would be to store it in the local storage using

localStorage.setItem('data', JSON.stringify(yourData);

and for retrieval, you can utilize

yourData = JSON.parse(localStorage.getItem('data'));

Answer 5

Answer №3

To avoid unnecessary updates, store the data in your system and only retrieve it when needed instead of making repeated HTTP calls. Consider saving the timestamp of the last update, and only initiate a call if there has been a significant time difference since the last update.

Answer 6

To avoid unnecessary updates, store the data in your system and only retrieve it when needed instead of making repeated HTTP calls. Consider saving the timestamp of the last update, and only initiate a call if there has been a significant time difference since the last update.

Answer 7

Answer №4

If you're looking for ways to interact with components, be sure to reference the available documentation at https://angular.io/guide/component-interaction. Personally, I find using a service to be effective in situations like yours (https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service).

Consider implementing a BehaviorSubject in your service and subscribing to it in your components for seamless communication.

Answer 8

If you're looking for ways to interact with components, be sure to reference the available documentation at https://angular.io/guide/component-interaction. Personally, I find using a service to be effective in situations like yours (https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service).

Consider implementing a BehaviorSubject in your service and subscribing to it in your components for seamless communication.

Avoid making API calls in every ngOnInit() function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error message: In Angular 8 using Jest instead of Jasmine, there is no exported member called 'SpyObj'

Issue encountered when attempting to display JSON index on individual result page

The navigate function fails to function properly in response to HttpClient

Previous states in TypeScript

Ignoring the NGRX Store selector override during testing appears to be happening

Bidirectional data binding of JSON object in Angular

Displaying [object Object] in Angular Material datatable

Create the correct structure for an AWS S3 bucket

Find the appropriate return type for a TypeScript function based on its argument

What is the best way to export an overloaded function in TypeScript?

Encountering obstacles when attempting to initiate a node application due to an error

Is it possible to determine the status of several angular components at once?

Enhance the visual appeal of incoming data using Angular Material's dynamic styling feature

Winston logs are unable to function within the Docker Container

Reacting like sticky bottoms and tops

utilize makeStyles to modify button text color

Enhancing the NextPage Typescript Type: A Step-by-Step Guide

Repeating the same algorithms in both the back and front ends while applying Domain Driven Design

Is it possible to conceal dom elements within an ng-template?

Removing an attachment from the attachment object array nestled within a comment object array nested inside another object array