title: How can I enforce depth-first retrieval using rxjs expand?
body: <p>I'm working on an Angular 7 / Typescript / RxJS 6.3.3 project, using various RxJS Observables and related operators to process hierarchical collections (tree-like, specifically) of objects retrieved from a database via http server.</p>
  
  <p>I thought to use the <code>expand</code> operator to create a depth-first search, and used <code>concatMap</code> to keep order... or so I hoped. Doesn't work.</p>
  
  <p>See distilled example here: <a href="https://stackblitz.com/edit/rxjs-vf4zem" rel="nofollow noreferrer">https://stackblitz.com/edit/rxjs-vf4zem</a></p>
  
  <p>The console output from that example is:</p>
  
  <pre><code>dfs no delay: [1,8,9,22,23,24,2,4,7,3]
  dfs with delay: [1,2,3,4,7,8,9,22,23,24]
  </code></pre>
  
  <p>(The second output line may vary depending on how much delay is added. The delay is intended to simulate data fetch from the http server.)</p>
  
  <p>Given the data in the example, my desire is to consistently get the first line of output: a depth-first ordering. The key function from the example:</p>
  
  <pre><code>const dfs = (getter: Getter) =&gt; rootIds.pipe(
    concatMap(ids =&gt; from(ids)),
    expand(id =&gt;
      getter(id).pipe(
        concatMap(children =&gt; from(children))
      )
    ),
    toArray()
  );
  </code></pre>
  
  <p>Is there a way to enforce depth-first processing? Can <code>expand</code> not guarantee that, or is this just a poor means to accomplish getting hierarchical data into a flattened, depth-first array?</p>