Angular Transfer State not preventing repeat http calls

Question

I have the http request being made a service which is injected onto my component and subscribed to from there. Since I introduced server side rendering with angular universal to my application, the results on the page are repeated at least twice.

I have method which is called on click, which performs the http request to facebook's api

getAlbum(albumId: number) {

    this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY, null as any);

    if (!this.albumPhotos) {
      this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {
        this.bachataPicsArray = res;
        this.state.set(ALBUM_PHOTOS_KEY, res as any);
      });
    }
  }

I declared the const variable below the imports

const ALBUM_PHOTOS_KEY = makeStateKey('albumPhotos');

And I also declared the property

albumNames: any;

I am assuming I have done all of the imports right I have the code on github in the gallery component.

Answer 1

You are on the right pass, you just need to handle your service differently if you are on the server or the browser side to perform your queries only once and not twice.

Pseudo logic:

• If server -> Do http request -> Set value in transfer-state
• If browser -> Get value from transfer-state

To do so, you could for example enhance your Service like following:

@Injectable()
export class FacebookEventsService {
    const ALBUM_PHOTOS_KEY: StateKey<number>;

    constructor(@Inject(PLATFORM_ID) private platformId: Object, private http: HttpClient) {
       this.ALBUM_PHOTOS_KEY = makeStateKey('albumPhotos');
    } 

    getBachaDiffFacebookEvents(): Observable<CalendarEvent[]> {
        // Here we check if server or browser side
        if (isPlatformServer(this.platformId)) {
            return this.getServerBachaDiffFacebookEvents();
        } else {
            return this.getBrowserBachaDiffFacebookEvents();
        }
    }

    getServerBachaDiffFacebookEvents(): Observable<CalendarEvent[]> {

           return this.http.get(this.facebookEventsUrl)
             .map(res => {

                  // Here save also result in transfer-state
                  this.transferState.set(ALBUM_PHOTOS_KEY, calendarEvents);

             });
     }


        getBrowserBachaDiffFacebookEvents(): Observable<CalendarEvent[]> {
           return new Observable(observer => {
            observer.next(this.transferState.get(ALBUM_PHOTOS_KEY, null));
          });
     }
}

UPDATE

To use this logic you would also need:

1. TransferHttpCacheModule (to be initialized in app.module.ts).

TransferHttpCacheModule installs a Http interceptor that avoids duplicate HttpClient requests on the client, for requests that were already made when the application was rendered on the server side.

https://github.com/angular/universal/tree/master/modules/common

2. ServerTransferStateModule on the server side and BrowserTransferStateModule on the client side to use TransferState

https://angular.io/api/platform-browser/TransferState

P.S.: Note that if you do so and enhance your server, of course you would not need anymore to set the value in transfer-state in your getAlbum() method you displayed above

UPDATE 2

If you want to handle the server and browser side as you did in your gallery.component.ts, you could do something like the following:

getAlbum(albumId: number) {

    if (isPlatformServer(this.platformId)) {

      if (!this.albumPhotos) {
        this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {
          this.bachataPicsArray = res;
          this.state.set(ALBUM_PHOTOS_KEY, null);
        });
      }
    } else {

      this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY,null);
    }

  }

UPDATE 3

The thing is, your action getAlbum is never called on the server side. This action is only used on the browser side, once the page is rendered, when the user click on a specific action. Therefore, using transfer-state in that specific case isn't correct/needed.

Furthermore not sure that the Observable in your service was correctly subscribed.

Here what to change to make it running:

gallery.component.ts

getAlbum(albumId: number) {

    this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {
        this.albumPhotos = res;
    });
  }

facebook-events.service.ts

getBachadiffAlbumPhotos(albumId: number): Observable<Object> {

    this.albumId = albumId;
    this.facebookAlbumPhotosUrl =    `https://graph.facebook.com/v2.11/${this.albumId}/photos?limit=20&fields=images,id,link,height,width&access_token=${this.accessToken}`;

    return    Observable.fromPromise(this.getPromiseBachaDiffAlbumPhotos(albumId));
  }

private getPromiseBachaDiffAlbumPhotos(albumId: number): Promise<{}> {
    return new Promise((resolve, reject) => {
      this.facebookAlbumPhotosUrl = `https://graph.facebook.com/v2.11/${this.albumId}/photos?limit=20&fields=images,id,link,height,width&access_token=${this.accessToken}`;

      let facebookPhotos: FacebookPhoto[] = new Array();
      let facebookPhoto: FacebookPhoto;

      const params: HttpParams = new HttpParams();
      this.http.get(this.facebookAlbumPhotosUrl, {params: params})
        .subscribe(res => {

          let facebookPhotoData = res['data'];

          for (let photo of facebookPhotoData) {

            facebookPhotos.push(
              facebookPhoto = {
                id: photo.id,
                image: photo.images[3].source,
                link: photo.link,
                height: photo.height,
                width: photo.width
              });
          }

          resolve(facebookPhotos);
        }, (error) => {
          reject(error);
        });
    });
  }

UPDATE 4

ngOnInit is executed on the server side, this means that my very first answer here has to be use in this case.

Furthermore, also note that on the server side you doesn't have access to the window, therefore calling $

With gallery.component.ts you could do something like this to run only the http queries once but this won't solve all your problems, I think it will still need further improvements.

ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      this.facebookService.getBachadiffFacebookVideos().subscribe(res => {
        this.bachataVidsArray = res;
        this.state.set(VIDEOS_KEY, res as any);
      });


  this.facebookService.getBachadiffFacebookLastClassPictures().subscribe(res => {
        this.bachataPicsArray = res;
        this.state.set(LAST_CLASS_PICTURES_KEY, res as any);
      });

      this.facebookService.getBachadiffAlbumNames().subscribe(res => {
        this.bachataAlbumHeaderNames = res;
        this.state.set(ALBUM_NAMES_KEY, res as any);
      });
    } else {
      $('ul.tabs').tabs();

      this.bachataVidsArray = this.state.get(VIDEOS_KEY, null as any);
      this.bachataPicsArray = this.state.get(LAST_CLASS_PICTURES_KEY, null as any);
      this.bachataAlbumHeaderNames = this.state.get(ALBUM_NAMES_KEY, null as any);
    }
  }