title: NGRX Effect sequence dependent api calls
body: <p>I'm currently working on a feature for an Angular app using NGRX in which an action is dispatched to fetch some data using an Id; then using the response object from the first service call, a second request is made to pull some more details out of a different endpoint. After everything is done data/actions can continue flowing.</p>
  
  <p>The problem: I'm looking for a way to perform the actions described above in a single effect, without chaining effects/actions as that would cause the component rendered to be incomplete.</p>
  
  <p>I've seen some examples using forkJoin but not sure if this would apply as they are not parallel calls but sequenced.</p>
  
  <p>Code is something like this:</p>
  
  <pre><code>    this.actions$.pipe(
        ofType(fetchAllData),
        switchMap(action =&gt; {
          const one = this.api.getById(serviceUrl, action.Id);
          return one.pipe(
            switchMap((data) =&gt; {
              cons two = this.api.getMoreDetail(serviceUrl, two.id)
              return fetchDataActions(data, []);
            })
          );
        })
      )
    );  
  </code></pre>
  
  <p>So ideally data would contain everything I need and ready to populate my component.</p>
  
  <p>Notes: 
  - code above does not work
  - calls have to happen in order as response from call #1 will use as parameter for call #2
  - making sequenced dispatched actions does not work as component data is incomplete when rendered.</p>