Ways to initiate a fresh API request while utilizing httpClient and shareReplay

Question

Ways to initiate a fresh API request while utilizing httpClient and shareReplay

I have implemented a configuration to share the replay of my httpClient request among multiple components. Here is the setup:

apicaller.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// import rxjs map
import { map, shareReplay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class ApicallerService {
  peopleindex: number = 1;
  constructor(private _http: HttpClient) {}

  private readonly request = this._http
    .get('https://swapi.dev/api/people/' + this.peopleindex)
    .pipe(shareReplay());

  getData(peopleindex: number = 1) {
    this.peopleindex = peopleindex;
    return this.request;
  }
}

Component1

This component should request the API to retrieve details for id 2

import { Component, OnInit } from '@angular/core';
import { ApicallerService } from '../apicaller.service';

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css'],
})
export class Component1Component implements OnInit {
  apiresponse: any;
  editRes: any;
  constructor(private _apicaller: ApicallerService) {}

  ngOnInit(): void {
    this._apicaller.getData(2).subscribe((data: any[]) => { // <-- Notice 2 in the argument
      console.log(data);
      this.apiresponse = data;
    });
  }
}

Component2

This component requests data for the default ID

import { Component, OnInit } from '@angular/core';
import { ApicallerService } from '../apicaller.service';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html',
  styleUrls: ['./component2.component.css']
})
export class Component2Component implements OnInit {

  apiresponse: any = {};
  constructor(
    private _apicaller: ApicallerService
  ) { }

  ngOnInit(): void {
    // get data from api using service
    this._apicaller.getData().subscribe(
      (data) => {
        this.apiresponse = data;
      }
    );
  }

}

However, there seems to be an issue where component1 is not making a new request with peopleindex = 2.

To see and reproduce the problem, you can check out my StackBlitz setup here: https://stackblitz.com/edit/angular-ivy-gdxyy6?file=src%2Fapp%2Fcomponent1%2Fcomponent1.component.ts

angular typescript rxjs

Answer 1

Answer №1

One recommendation is to establish an API store for scenarios like this.

Initially, the API will be stored with a specific ID and return the initial call.
Subsequently, the stored API will be utilized on subsequent calls.

export class ApicallerService {
  apiStore = new Map();
  constructor(private _http: HttpClient) {}

  private getApiRequest(id) {
    return this._http.get('https://swapi.dev/api/people/' + id).pipe(shareReplay());
  }

  getData(peopleindex: number = 1) {
    if (!this.apiStore.has(peopleindex)) {
      this.apiStore.set(peopleindex, this.getApiRequest(peopleindex));
    }
    return this.apiStore.get(peopleindex);
  }
}

Answer 2

One recommendation is to establish an API store for scenarios like this.

Initially, the API will be stored with a specific ID and return the initial call.
Subsequently, the stored API will be utilized on subsequent calls.

export class ApicallerService {
  apiStore = new Map();
  constructor(private _http: HttpClient) {}

  private getApiRequest(id) {
    return this._http.get('https://swapi.dev/api/people/' + id).pipe(shareReplay());
  }

  getData(peopleindex: number = 1) {
    if (!this.apiStore.has(peopleindex)) {
      this.apiStore.set(peopleindex, this.getApiRequest(peopleindex));
    }
    return this.apiStore.get(peopleindex);
  }
}

Answer 3

Answer №2

Utilizing ShareReplay can be advantageous when you require consistent metadata (masterdata) that remains the same across various components, allowing for cached or shared data.

To ensure the expression is executed with updated values, it's essential to include a getter for the request instead of directly accessing the field.

private get request() { 
    return this._http.get('https://swapi.dev/api/people/' + this.peopleindex);
}

The common practice for making httpService calls involves creating a dedicated service to handle REST endpoints by wrapping around the httpClient.

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  constructor(private _http: HttpClient) {}

  get(url: string) {
    return this._http
    .get(url);
  }

  post(url: string, data) {
    return this._http
    .post(url, data);
  }

}

Subsequently, establish a feature service that relies on the apiService.

@Injectable({
  providedIn: 'root',
})
export class PeopleService {
  constructor(private _api: ApiService) {}

  getData(peopleindex: number = 1) {
    console.log(peopleindex);
    return this._api
    .get('https://swapi.dev/api/people/' + peopleindex);
  }
}

Invoke these feature services within your respective feature components.

export class Component1Component implements OnInit {
  apiresponse: any;
  editRes: any;

  constructor(private _peopleService: PeopleService) {}

  ngOnInit(): void {
    this._peopleService.getData(2).subscribe((data: any[]) => {
      this.apiresponse = data;
    });
  }
}

export class Component2Component implements OnInit {
      apiresponse: any = {};
      constructor(
        private _peopleService: PeopleService
      ) { }

      ngOnInit(): void {
        // Obtain data from API using the service
        this._peopleService.getData().subscribe(
          (data) => {
            console.log(data);
            this.apiresponse = data;
          }
        );        
      }
    }

For further reference, you can access the StackBlitz link here.

Answer 4

Utilizing ShareReplay can be advantageous when you require consistent metadata (masterdata) that remains the same across various components, allowing for cached or shared data.

To ensure the expression is executed with updated values, it's essential to include a getter for the request instead of directly accessing the field.

private get request() { 
    return this._http.get('https://swapi.dev/api/people/' + this.peopleindex);
}

The common practice for making httpService calls involves creating a dedicated service to handle REST endpoints by wrapping around the httpClient.

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  constructor(private _http: HttpClient) {}

  get(url: string) {
    return this._http
    .get(url);
  }

  post(url: string, data) {
    return this._http
    .post(url, data);
  }

}

Subsequently, establish a feature service that relies on the apiService.

@Injectable({
  providedIn: 'root',
})
export class PeopleService {
  constructor(private _api: ApiService) {}

  getData(peopleindex: number = 1) {
    console.log(peopleindex);
    return this._api
    .get('https://swapi.dev/api/people/' + peopleindex);
  }
}

Invoke these feature services within your respective feature components.

export class Component1Component implements OnInit {
  apiresponse: any;
  editRes: any;

  constructor(private _peopleService: PeopleService) {}

  ngOnInit(): void {
    this._peopleService.getData(2).subscribe((data: any[]) => {
      this.apiresponse = data;
    });
  }
}

export class Component2Component implements OnInit {
      apiresponse: any = {};
      constructor(
        private _peopleService: PeopleService
      ) { }

      ngOnInit(): void {
        // Obtain data from API using the service
        this._peopleService.getData().subscribe(
          (data) => {
            console.log(data);
            this.apiresponse = data;
          }
        );        
      }
    }

For further reference, you can access the StackBlitz link here.

Ways to initiate a fresh API request while utilizing httpClient and shareReplay

Answer №1

Answer №2

Similar questions

What strategies can be utilized to manage a sizable data set?

Troubleshooting property assignment issues within an Angular service

Deactivate the button in the final <td> of a table generated using a loop

Obtain the object literal string with additional decorative strings surrounding it

Is there a disparity in capabilities or drawbacks between ViewChild and Input/Output in Angular?

communicating between client and server by sending http requests within the Heroku platform

When trying to pass 3 parameters from an Angular frontend to a C# MVC backend, I noticed that the server side was receiving null

Tips for incorporating the observer design pattern in REST APIs (Communication between front-end and back-end)

Applying background-image in ngStyle results in an undefined value

Issue with Typescript not recognizing default properties on components

Exploring the functionality of custom hooks and context in asynchronous methods using React Testing Library

Error encountered: No matching overload found for MUI styled TypeScript

Sending data from child components to parent components in Angular

Securing Your Angular 2 / ASP.NET MVC Application from CSRF Attacks

Importing SCSS files dynamically with TypeScript

What are the best practices for utilizing fetch() to retrieve data from a web API effectively?

Navigating Routes with Router in Angular 7: A Step-by-Step Guide

Guide on inserting Angular 2 attributes within a variable in an Angular 2 TypeScript class

reasons why my custom attribute directive isn't functioning properly with data binding

Create an array form with the first input at index 0 filled out