I am trying to use Fetch API’s stream capability to read streaming data from backend and use it, based on this.

My code is structured as:

function init() {
  container = document.createElement("div");
  document.body.appendChild(container);

  fetch("http://localhost:8080/data/stream", {
    method: "GET",
    headers: {
      Accept: "application/json",
    },
  }).then((response) => {
    const reader = response.body.getReader();
    return new ReadableStream({
      start(controller) {
        return pump();
        function pump() {
          return reader.read().then(({ done, value }) => {
            // When no more data needs to be consumed, close the stream
            if (done) {
              controller.close();

              // do something with data fetched

              return;
            }
            // Enqueue the next data chunk into our target stream
            controller.enqueue(value);

            // put data in some data structures(like arrays) for using at end

            return pump();
          });
        }
      },
    });
  });
}

init();

But this is not working as expected. I expect it to consume all of the streamed data, but while backend streams almost 1.5 million records, this code is able to consume very little of that. ‘done’ gets true even before entire data has arrived.

What mistake am I making here?