Most efficient way to load an array of observables (slow network requests) based on an initial...

So the situation is I load a list of objects (in this case users) to display. Most of the user data pulls very fast but the photo fetch is rather slow. Rather than pulling all of the data including photos in one request, I want to pull all the data except for photos in one request, and then pull all the photos as separate requests. I don't care if the photos are initially populated or not, I want the data and structure to populate on the page first, and the photos to appear as they load.

I'm having some issues getting this to work; my app hangs. I'm thinking it could be because of how apollo client doesn't play nice with async pipes in angular... but I'm not sure. I'm not fetching that many photo requests yet, but they don't seem to go through and my network tab has not finishing requests.

page.html

<ul>
<li *ngFor="let user of users$ | async">
<div class="avatar">
<img [src]="getUserPhotoUrl(user.username)" />
</div>
<span>{{user.username}}</span>
</li>
</ul>


page.ts

class {
users$: Observable<User[]>;

ngOnInit() {
this.user$ = this.apollo.watchQuery<users: User[]>({query: usersQuery}).valueChanges.pipe(map(result => result.data.users));
}

getUserPhotoUrl(username: string) {
return this.http.get(`.../user/${username}/photo`);
}

}

Continue reading...