What is the most efficient way to trigger an API call using Angular HttpClient in response to multiple events without repetitively subscribing to the API call method throughout my code?

Question

What is the most efficient way to trigger an API call using Angular HttpClient in response to multiple events without repetitively subscribing to the API call method throughout my code?

In my Angular Cli app, I have a data table with dynamic filters and a search bar. Whenever the search value changes, pagination changes, or a filter is applied or removed, I need to update the table items and filter information by making an API call.

My service has a function that handles the API call and returns the response:

getFilters() {
    const body = { searchTerm: 'foo' }; // 
    return http.post(url, body)
        .map(res => res)
        .catch(err => Observable.of(err);
}

getTableItems() {
    const body = { searchTerm: 'foo', ...stuff for filtering }; // 
    return http.post(url, body)
        .map(res => res)
        .catch(err => Observable.of(err);
}

getApiData() {
    const filters = this.getFilters();
    const items = this.getTableItems();
    return forkJoin([ filters, items ]);
}

Since I have multiple methods triggering API calls, I'm duplicating the

getApiData().subscribe(res => doSomethingWithResponse(res));

in the constructor and each trigger method.

How can I avoid this repetition and maintain a DRY codebase? I utilize @ngrx/store for data storage on the Front End and work with rxjs Observable's and BehaviorSubject's.

angular http typescript rxjs dry

Answer 1

Answer №1

Your application relies on data from the API as one of its primary sources. Various events can trigger changes in the data:

search queries
pagination
filters

To display posts in your component, you will need to use the posts$ observable as the source of posts.

<div *ngFor="let post in posts$ | async">{{post}}</div>

You need to define this observable in your component:

posts$: Observable<Post>;
ngOnInit() {
    const body = {};
    this.posts$ = http.post(url, body);
}

But currently, no parameters are being used. Let's identify the sources of changes and define them as observables:

posts$: Observable<Post>;
page$: Observable<number>;
searchTerm$: Observable<string>;
otherFilters$: Observable<Filters>;

In the ngOnInit() hook, we will focus on pagination and search input as the sources of events:

ngOnInit() {
    this.page$ = this.route.paramMap
        .switchMap((params: ParamMap) => params.get('page'));
    this.searchTerm$ = this.searchTerm.valueChanges
        .startWith('');
    
    const body = {};
    this.posts$ = http.post(url, body);
}

To trigger new data downloads whenever there's a change in page$ or searchTerm$, define the posts$ observable based on these two:

this.posts$ = Observable.combineLatest(this.page$, this.searchTerm$, (page, searchTerm) => ({ page, searchTerm}))
    .switchMap(params => {
        let body = params;
        return http.post(url, body);
    });

Pay attention to the transform function in combineLatest, which creates a single object with values from each observable for the switchMap to use. By composing observables in this way, you can subscribe to the final data source. Remember to use the async pipe for subscription to manage automatic unsubscribing. I hope this explanation is helpful! 👍

Answer 2

Your application relies on data from the API as one of its primary sources. Various events can trigger changes in the data:

search queries
pagination
filters

To display posts in your component, you will need to use the posts$ observable as the source of posts.

<div *ngFor="let post in posts$ | async">{{post}}</div>

You need to define this observable in your component:

posts$: Observable<Post>;
ngOnInit() {
    const body = {};
    this.posts$ = http.post(url, body);
}

But currently, no parameters are being used. Let's identify the sources of changes and define them as observables:

posts$: Observable<Post>;
page$: Observable<number>;
searchTerm$: Observable<string>;
otherFilters$: Observable<Filters>;

In the ngOnInit() hook, we will focus on pagination and search input as the sources of events:

ngOnInit() {
    this.page$ = this.route.paramMap
        .switchMap((params: ParamMap) => params.get('page'));
    this.searchTerm$ = this.searchTerm.valueChanges
        .startWith('');
    
    const body = {};
    this.posts$ = http.post(url, body);
}

To trigger new data downloads whenever there's a change in page$ or searchTerm$, define the posts$ observable based on these two:

this.posts$ = Observable.combineLatest(this.page$, this.searchTerm$, (page, searchTerm) => ({ page, searchTerm}))
    .switchMap(params => {
        let body = params;
        return http.post(url, body);
    });

Pay attention to the transform function in combineLatest, which creates a single object with values from each observable for the switchMap to use. By composing observables in this way, you can subscribe to the final data source. Remember to use the async pipe for subscription to manage automatic unsubscribing. I hope this explanation is helpful! 👍

What is the most efficient way to trigger an API call using Angular HttpClient in response to multiple events without repetitively subscribing to the API call method throughout my code?

Answer №1

Similar questions

How can I combine Angular's material drag and drop feature with virtual scrolling?

Creating dynamic checkboxes and dropdown menus in Angular 8 by fetching data from an API

"Setting Up a Service in Angular: A Step-by-Step Guide

Is it possible to use an object's attribute as a switch case in TypeScript with useReducer?

Tips for converting mat-paginator in Angular 4?

What is the process of determining if two tuples are equal in Typescript?

Developing a feature in Angular 4 where shared components generate new instances with each reload

Having trouble with a nested Angular 2 component not showing up on the page?

Tips for testing Observable.fromEvent

Angular: Leveraging real-time data updates to populate an Angular Material Table by subscribing to a dynamic data variable in a service

Angular2 poses a strange problem with ngClass

Issue with Angular/Jasmine: Undefined property 'pipe' not readable

Typescript enhances React Native's Pressable component with a pressed property

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

What's preventing me from using just one comparison condition in TypeScript?

Testing Angular Library Before Release

What is the best way to exhibit information from a get request within an option tag?

What is the best way to arrange and manage assets?

Struggle with implementing enums correctly in ngSwitch

Tips for resolving the issue where a radio group in Angular does not impact other items