What is the process for sending an http request using the information gathered from a previous http request?

Question

What is the process for sending an http request using the information gathered from a previous http request?

One of the properties in my Issue object is an array of Tool objects, with both Issues and Tools stored in separate tables in my database.

In my issues-log.component, I am successfully dispatching an action to search for matching issues based on a query.

Now, my goal is to retrieve the list of tools associated with each issue by passing the issue id to my tools service. To achieve this, I created another effect that listens for the ISSUE.SEARCH.COMPLETE action. However, looping through the array of issues in my tools service to call the API for each issue id feels inefficient. It slows down the loading time for large lists of issues and limits the re-usability of my tools service.

I don't want to wait for all the issues to load before fetching the associated tools. Is there a way to optimize my code so that I can start adding the tools as the list of issues is being constructed within the issuesSearch$ effect?

Component:

@Component({
selector: issue-log,
template: `
  <issue-search (search)="search($event)></issue-search>
  <issue-list [issues]=$issues | async></issue-list>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class IssueLogComponent {
  issues$: Observable<Issue[]>;

  constructor(private store: Store<fromRoot.State>) {
    this.issues$ = store.select(fromRoot.getIssueSearchResults);
  }

  search(query) {
    this.store.dispatch(new issue.IssueSearch(query));
  }
}

Effect:

@Effect() issueSearch$: Observable<Action> = this.actions$
  .ofType(issue.ISSUE_SEARCH)
  .debounceTime(300)
  .map(toPayload)
  .switchMap(query => {
    if (query === '') {
      return empty();
    }
    const nextSearch$ = this.actions$.ofType(issue.ISSUE_SEARCH).skip(1);
    return this.issueService.getIssuesFromQuery(query) //calls API service
      .takeUntil(nextSearch$)
      .mergeMap((res: Issue[]) => {
        // How do I make another API call here, passing data from each element of res array?
        return Observable.from([
          new issue.IssueSearchComplete(res)
        ])
      })
      .catch(() => of(new issue.IssueSearchComplete([])));
});

I also attempted calling my tools service from within my issues service, but it didn't feel like the right solution.

angular typescript rxjs ngrx-effects ngrx-store

Answer 1

Answer №1

If you require immediate access to the results of your issues before making any other asynchronous requests based on that data, consider utilizing an RxJS Subject.

You can observe the subject for issues and subscribe to the final calls' observable as well.

Here is how it breaks down:

Fetch issues
Pass the issues to another observable stream for immediate access
Use the issues to make additional async calls
Return the result of the final calls, which can also be subscribed to

This approach requires subscribing to two separate observable streams.

Here's a simplified example:

@Injectable()
export class FooService {
    issuesSubject: BehaviorSubject<Issue[]> = new BehaviorSubject([]);

    get issues$(): Observable<Issue[]> {
        return this.issuesSubject.asObservable();
    }

    getIssuesAndMakeOtherAsyncCalls(): Observable<any> {
       return this.issueService
                  .getIssuesFromQuery(query)
                  .flatMap((issues: Issue[]) => {
                      // Add issues to the stream here
                      this.issuesSubject.next(issues);

                      // Make other HTTP calls using the issues
                      return this.makeSomeOtherCallsUsingIssues(issues);
                  })
    }
}

In your component:

@Component({})
export class FooComponent implements OnInit {
    ngOnInit() {
        this.issueService.getIssuesAndMakeOtherAsyncCalls().subscribe(res => {
            // Result from the service call will be available in `res`
        });

        this.issueService.issues$.subscribe((issues: Issue[]) => {
            // Receive the issues when `this.issuesSubject.next(issues)` is triggered in the service
        });
    }
}

Does this solution meet your requirements?

Answer 2

If you require immediate access to the results of your issues before making any other asynchronous requests based on that data, consider utilizing an RxJS Subject.

You can observe the subject for issues and subscribe to the final calls' observable as well.

Here is how it breaks down:

Fetch issues
Pass the issues to another observable stream for immediate access
Use the issues to make additional async calls
Return the result of the final calls, which can also be subscribed to

This approach requires subscribing to two separate observable streams.

Here's a simplified example:

@Injectable()
export class FooService {
    issuesSubject: BehaviorSubject<Issue[]> = new BehaviorSubject([]);

    get issues$(): Observable<Issue[]> {
        return this.issuesSubject.asObservable();
    }

    getIssuesAndMakeOtherAsyncCalls(): Observable<any> {
       return this.issueService
                  .getIssuesFromQuery(query)
                  .flatMap((issues: Issue[]) => {
                      // Add issues to the stream here
                      this.issuesSubject.next(issues);

                      // Make other HTTP calls using the issues
                      return this.makeSomeOtherCallsUsingIssues(issues);
                  })
    }
}

In your component:

@Component({})
export class FooComponent implements OnInit {
    ngOnInit() {
        this.issueService.getIssuesAndMakeOtherAsyncCalls().subscribe(res => {
            // Result from the service call will be available in `res`
        });

        this.issueService.issues$.subscribe((issues: Issue[]) => {
            // Receive the issues when `this.issuesSubject.next(issues)` is triggered in the service
        });
    }
}

Does this solution meet your requirements?

What is the process for sending an http request using the information gathered from a previous http request?

Answer №1

Similar questions

The entry for package "ts-retry" could not be resolved due to possible errors in the main/module/exports specified in its package.json file

The current state of this scenario is not clearly defined within the parent class

Choose a duplicate of an element from an array using JavaScript

Subscribe again to an observable from a header module

Updating a value from a provider in Angular: A step-by-step guide

When performing an arithmetic operation, the right operand must be a data type of 'any', 'number', 'bigint', or an enumeration type

Linking Ionic Apps to Different Subfolders

The collaboration of React hooks, typescript, mongoose, express, and socket.io in perfect harmony

The error message states that the property 'id' is not found on the 'User' type when using Passport and Typescript

Following the migration to Typescript, the React component is having trouble locating the redux store props and actions

Having trouble passing mock data into a functional component and attempting to iterate over an array to display attributes in spans. However, encountering type errors that prevent access to the mock data

In order to deactivate all buttons generated by ngFor in Angular 8, you can disable every button except for the one that has been

Refreshing a component in Angular/Angular2 using routerLink from the NavBar when already on the current route

The functionality of GetStaticProps with Typescript is only operational when defined as an arrow function, rather than a function

Is there a way to utilize req.query, req.params, or req.* beyond its original scope without the need to store it in a database?

Encountered an error while attempting to load http://localhost:9999/auth-service/oauth/token: The response for preflight request returned an unexpected HTTP status code

How can we determine if the mat-datepicker popup was closed due to a date being selected?

Production is experiencing a hiccup, however, the site is still up and running. There seems to be

How can conditional types be implemented with React Select?

Enhanced Autocomplete Feature with Select All Option in MUI