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

Modifying the property value based on the selected item from a dropdown menu in Angular 2

Angula 5 presents a glitch in its functionality where the on click events fail

When using the map function, I am receiving an empty item instead of the intended item based on a condition

Even after ensuring the proper type checking, I am still receiving the error message "Property 'message' does not exist on type 'object'"

Error: The JSON file cannot be located by the @rollup/plugin-typescript plugin

Retrieve the text content of the <ul> <li> elements following a click on them

Troubleshooting AngularJS2 and npm in WebStorm and Chrome for Windows users

Exploring the TypeScript handbook: Utilizing rootDirs for Virtual Directories

Encountering the error "RouterOutletMap provider not found" while using angular-cli version 1.0.0-beta.10

"Angular Google Maps module working perfectly on local environment but failing to render on live production site

Cordova's FileReader takes precedence over TypeScript's FileReader functionality

Tips on implementing computed properties in Vue.js while using TypeScript

The member 'email' is not found in the promise type 'KindeUser | null'

Ways to observe redux action flow within a component

NgFor is designed to bind only to Iterables like Arrays

Link Array Element to [(value)] within Angular

Issue: Unhandled promise rejection: NullInjectorError: R3InjectorError(AppModule)[baseURL]

What is the process for turning off deep imports in Tslint or tsconfig?

Guide to highlighting manually selected months in the monthpicker by utilizing the DoCheck function in Angular

Using Angular and Typescript to Submit a Post Request