title: Download Response Data as Stream w/ Axios in React App
body: <h2>Issue</h2>
  
  <p>I need to download query results from an endpoint by streaming results to a CSV file. This is in an effort to support enormous ResultSets being sent through the browser at one time. </p>
  
  <p>Is there a way to accomplish this using Axios in the context of a React App? </p>
  
  <p>I have seen <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="noreferrer">fetch()</a> and know that it has the following characteristics:</p>
  
  <ul>
  <li>returns ReadableStream</li>
  <li>Is NOT supported by IE11</li>
  <li>Does NOT allow for intercepting requests</li>
  <li>The <strong>status</strong> of a response relates to the request itself, not the HTTP status
  
  <ul>
  <li>This means that the only way to receive an error would be to have something go wrong with the stream ending prematurely</li>
  <li>This definitely won't work for me since I have custom error-handling related to user permissions</li>
  </ul></li>
  </ul>
  
  <p>Besides the <code>ReadableStream</code> response type, the rest of the characteristics listed are not permissible. I will need to support IE11 and allow for intercepting requests / reading the HTTP status to determine how to handle the traffic. </p>
  
  <h2>Example with <code>fetch</code>:</h2>
  
  <pre class="lang-js prettyprint-override"><code>      // The promise returned by `fetch` rejects if the fetch was unable to make HTTP-request
        //  e.g. network problems, or there’s no such site.
        // Abnormal HTTP-statuses, such as 404 or 500 do not cause an error.
        const results = await fetch(`${URL}/data`, {
          method: 'post', // HTTP POST to send query to server
          headers: {
            Accept: 'application/json, text/plain, */*', // indicates which files we are able to understand
            'Content-Type': 'application/json', // indicates what the server actually sent
          },
          body: JSON.stringify(query), // server is expecting JSON
          credentials: 'include', // sends the JSESSIONID cookie with the address
        }).then(res =&gt; res.json()) // turn the ReadableStream response back into JSON
          .then((res) =&gt; {
            if (res.ok) {
              // boolean, true if the HTTP status code is 200-299.
              console.log('response.ok!');
            } else if (res.status === 401) {
              throw Error(`You are not authenticated. Please login.`);
            } else if (res.status === 403) {
              throw Error(`You are not authorized to access this data.`);
            } else {
              throw Error(`Request rejected with status ${res.status}`);
            }
          })
          .catch((error) =&gt; {
            // catches error case and if fetch itself rejects
            error.response = {
              status: 0,
              statusText:
                'Cannot connect. Please make sure you are connected to internet.',
            };
            throw error;
          });
  
        console.log(results);
  </code></pre>
  
  <h2>Example with <code>axios</code> (not streaming)</h2>
  
  <h3>Axios instance</h3>
  
  <pre class="lang-js prettyprint-override"><code>import ...
  const Api = axios.create({
    baseURL: `${URL}`,
    withCredentials: true,
  });
  
  // attach interceptors to requests and responses
  // these are defined elsewhere and imported
  Api.interceptors.request.use((request) =&gt; requestHandler(request));
  Api.interceptors.response.use((response) =&gt; successHandler(response), (error) =&gt; errorHandler(error));
  
  export default Api;
  </code></pre>
  
  <h3>Axios request</h3>
  
  <pre class="lang-js prettyprint-override"><code>const query = {"selections":{"TABLE_A":["COLUMN1"]},"filters":[{"predicates":[]}],"joins":[],"sorts":[],"limit":100,"offset":0}
  const response = await Api.post('/data', query);
  // further transformations to response to get formatted csv results required
  </code></pre>
  
  <h2>Questions about Axios</h2>
  
  <ul>
  <li>Is it possible to have a <code>ReadableStream</code> in Axios same as <code>fetch</code>? </li>
  <li>Is streaming in Axios only possible when assuming that it will be supported by Node in a server-side only setting?
  
  <ul>
  <li>Sites like <a href="https://futurestud.io/tutorials/download-files-images-with-axios-in-node-js" rel="noreferrer">this</a> appear to say that using <code>responseType: 'stream'</code> isn't something that can be done in the browser, only with Node.js using <code>fs</code> </li>
  </ul></li>
  <li>Is it possible to use <code>fetch</code> or something else in conjunction with Axios?</li>
  </ul>