title: Return paginated output recursively with Fetch API
body: <h3>Summary</h3>
  
  <p>I'd like to collate paginated output into an array using JavaScript's Fetch API recursively. Having started out with promises, I thought an async/await function would be more suitable.</p>
  
  <h3>Attempt</h3>
  
  <p>Here's my approach:</p>
  
  <pre class="lang-js prettyprint-override"><code>global.fetch = require("node-fetch");
  
  async function fetchRequest(url) {
    try {
      // Fetch request and parse as JSON
      const response = await fetch(url);
      let data = await response.json();
  
      // Extract the url of the response's "next" relational Link header
      let next_page = /&lt;([^&gt;]+)&gt;; rel="next"/g.exec(response.headers.get("link"))[1];
  
      // If another page exists, merge it into the array
      // Else return the complete array of paginated output
      if (next_page) {
        data = data.concat(fetchRequest(next_page));
      } else {
        console.log(data);
        return data;
      }
  
    } catch (err) {
      return console.error(err);
    }
  }
  
  // Live demo endpoint to experiment with
  fetchRequest("https://jsonplaceholder.cypress.io/posts?_page=9");
  </code></pre>
  
  <p>For this demo, it should result in 2 requests which yield a single array of 20 objects. Although the data is returned, I can't fathom how to collate it together into an array. Any guidance would be really appreciated. Thanks for your time.</p>
  
  <h3>Solution #1</h3>
  
  <p>Thanks to @ankit-gupta:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>async function fetchRequest(url) {
    try {
      // Fetch request and parse as JSON
      const response = await fetch(url);
      let data = await response.json();
  
      // Extract the url of the response's "next" relational Link header
      let next_page;
      if (/&lt;([^&gt;]+)&gt;; rel="next"/g.test(response.headers.get("link"))) {
        next_page = /&lt;([^&gt;]+)&gt;; rel="next"/g.exec(response.headers.get("link"))[1];
      }
  
      // If another page exists, merge its output into the array recursively
      if (next_page) {
        data = data.concat(await fetchRequest(next_page));
      }
      return data;
    } catch (err) {
      return console.error(err);
    }
  }
  
  fetchRequest("https://jsonplaceholder.cypress.io/posts?_page=9").then(data =&gt;
    console.log(data)
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>For each page, subsequent calls are made recursively and concatenated together into one array. Would it be possible to chain these calls in parallel, using <a href="https://dev.to/jamesliudotcc/how-to-use-async-await-with-map-and-promise-all-1gb5" rel="nofollow noreferrer">Promises.all</a>, similar to <a href="https://stackoverflow.com/a/60590875/8377918">this answer</a>?</p>
  
  <p>On a side note, any ideas why StackOverflow Snippets fails on the second Fetch?</p>