title: How do I wait until all the Promises are fulfilled in RxJS?
body: <p>I have a list of Promises that I want to get the result and display on the page.</p>
  
  <pre><code> let directives = ['object-src', 'img-src', 'media-src', 'script-src', 'style-src', 'frame-src', 'child-src'];
  
   let directivesStream = Rx.Observable.from(directives)
     .map((d) =&gt; {
       let q = getSummaryCSP({
         origin: origin,
           directive: d,
           from: moment().subtract(3, 'days').utc().format(),
           to: moment().utc().format()
       });
  
       return Rx.Observable.interval(10000)
         .flatMap(() =&gt; Rx.Observable.fromPromise(queries.query(q)));
     });
  
   directivesStream.mergeAll().subscribe((response) =&gt; {
     let flattenedRes = _.sortBy(response.data, (e) =&gt; e.event.count);
     flattenedRes = _.reverse(flattenedRes);
     this.setState({
       cspReport: flattenedRes
     });
   });
  </code></pre>
  
  <p>So what it's doing is it creates a stream of Promises with interval of <code>10000</code>. However, the end result is the combined results of all the promises that's why I'm doing <code>sorting</code> and <code>reversing</code> and then display the result in React. </p>
  
  <p>I know that everything in RxJs is a stream. So, I'm not sure if I can achieve this at all?</p>
  
  <p>So, my question is how do I create a stream of Promises that at the end 10s, all the streams have to be merged into one stream so I can use the result of all the promises. </p>