Integrate data flow from ActivatedRoute observables with Observables generated from API requests

Question

Integrate data flow from ActivatedRoute observables with Observables generated from API requests

Seeking to combine two observables using either forkJoin or combineLatest (my current options). One observable originates from the ActivatedRoute's data (Observable<Data>) and the other is a call to the API (Observable<Project>). https://i.sstatic.net/fu45O.png

Originally, these two were nested and functioning correctly. However, I believe that combining the observables may lead to improvement. I acknowledge that the observable from the activated route is ongoing and is invoked each time the user navigates within the app. The second observable concludes upon receiving a response. forkJoin operates with completed observables while combineLatest handles ongoing ones, capturing their latest values.

Is there a way to amalgamate these two, or is the nested approach the optimal solution? Appreciate your insights!

EDIT: Made some minor corrections and introduced array deconstruction to the code.

On a side note, I encountered an issue where upon refreshing the app on the current page, the routeData appears as an empty object. However, placing a breakpoint where the routeData is defined resolves the issue. It seems as though a slight delay is required for the current routeData to be populated. Why isn't it automatically triggered once the data is added to the route? Apologies if this is confusing

Further update: I have two pages with their respective components: Asset Management (AssetManagementComponent) and Projects Management (ProjectManagementComponent). The Project component is a subcomponent of the Asset component. Upon initializing the asset component, I fetch data from the API and assign it to route.data. Subsequently, when the project component (child) is loaded, I aim to retrieve the route data along with additional project-specific data from the API.

The issue arises when I refresh the Project Management page, resulting in routeData being an empty object {} based on the above code. However, if I navigate from Asset Management to Project Management, routeData contains the accurate data.

In an attempt to debug this problem using DevTools, I noticed that placing breakpoints in each ngOnInit() function results in the correct routeData, even when directly refreshing the app on ProjectManagement.

UPDATE:

Here is the final and functional version: https://i.sstatic.net/e0PZZ.png The issue was resolved by adding a filter to the route data observable, ensuring that it first triggers with an empty object and then with a valid object.

Many thanks to all for your valuable input, I have gained new insights and best practices! Wishing you a wonderful day!

angular typescript rxjs

Answer 1

Answer №1

It seems like the best approach for this situation would be to utilize the mergeMap function. From what I gather, the issue arises when the activeRoute subscriptions are initially empty upon refresh, but then receive data and trigger a second subscription.

This method involves filtering out route params that do not contain an asset, and then using mergeMap to pass it along to the next request. This ensures that both values are always present once the code reaches its final destination.

A revised version of the code could look something like this:

this.route.parent.data.pipe(
  filter(routeData => routeData && routeData.asset), // making sure route data exists
  mergeMap(routeData =>{
    return this.projectService.getProjectDetails(projectId).pipe.map(project =>{
       return {routeData, project}
    })
  }),
  map(data => {
    // Now you should have access to both data.routeData and data.project
     
  })
).subscribe()

I hope this solution proves helpful, as dealing with routeParams can be quite tricky when they are needed to make additional calls. I believe the code provided is accurate, but please excuse any errors as it's a late night and I'm relying on memory (and Google) for assistance. haha

Answer 2

It seems like the best approach for this situation would be to utilize the mergeMap function. From what I gather, the issue arises when the activeRoute subscriptions are initially empty upon refresh, but then receive data and trigger a second subscription.

This method involves filtering out route params that do not contain an asset, and then using mergeMap to pass it along to the next request. This ensures that both values are always present once the code reaches its final destination.

A revised version of the code could look something like this:

this.route.parent.data.pipe(
  filter(routeData => routeData && routeData.asset), // making sure route data exists
  mergeMap(routeData =>{
    return this.projectService.getProjectDetails(projectId).pipe.map(project =>{
       return {routeData, project}
    })
  }),
  map(data => {
    // Now you should have access to both data.routeData and data.project
     
  })
).subscribe()

I hope this solution proves helpful, as dealing with routeParams can be quite tricky when they are needed to make additional calls. I believe the code provided is accurate, but please excuse any errors as it's a late night and I'm relying on memory (and Google) for assistance. haha

Integrate data flow from ActivatedRoute observables with Observables generated from API requests

Answer №1

Similar questions

Is there a method to obtain the compiled CSS for an Angular 2+ component?

When the value is empty, MUI Autocomplete will highlight all items

Identifying whether an Angular component has been loaded through a template or a route: Ways to distinguish

The error message "Property 'hideKeyboardAccessoryBar' does not exist on type 'Keyboard'." appeared while using the IONIC Moodle App

Guidance on converting a file object to a blob/byte array within a TypeScript interface

There seems to be an issue with the subscription of a subject between two modules in Angular 5

Expired URL in Ionic 3 Navigation

An error is anticipated when () is added, but surprisingly, I still encounter an error as well. This issue arises in React-Native and Typescript

In this guide, we will explore the process of designing unique styles for ng

Encountering obstacles when attempting to initiate a node application due to an error

Learn the steps to designing a responsive class using Angular2's ngClass feature

Closing iframe in Angular 4 after redirection

Wrapping an anonymous function in a wrapper function in Typescript can prevent the inferred typing

Scrolling through a list in Angular using cdk-virtual-scroll-viewport while selecting items via keyboard input

Adding a declaration file to a package that relies on an external declaration file can be achieved by following these

Transmit a sequence of keys to the web browser

Resolve the issue of text overflow in PrimeNG Turbo Table cells

Enhance the Nuxt 3 experience by expanding the functionality of the NuxtApp type with

Deleting an element in an Array of objects using Typescript

Is it possible to define TypeScript interfaces in a separate file and utilize them without the need for importing?