Fetch hangs when trying to access HTTP streaming API

Description

Cannot use W3C’s Fetch streaming API to access a long-running SSE event-stream which just hangs until the stream has ended.

Reproduction

var start = Date.now();
console.log("fetch() ...", Date.now() - start, "ms");
fetch("http://chat.servicestack.net/event-stream")
  .then(res => {
      console.log("then() ...", Date.now() - start, "ms");
      if (!res.ok)
        throw new Error(`${res.status} = ${res.statusText}`);

      var reader = res.body.getReader();
      return reader.read().then(function handleNext(result) {
          console.log("read() ...", Date.now() - start);
      });
  })
  .catch(error => {
      console.log("catch() ", error.message, Date.now() - start, "ms");
  });

In React Native this prints out:

fetch() ... 0 ms
then() ... 32205 ms
catch()  undefined is not an object (evaluating 'res.body.getReader') 32212 ms

i.e. where it doesn’t complete until the server terminates the connection and when it does complete it saysres.body isn’t an object. Whereas in Chrome it works as expected:

fetch() ... 0 ms
then() ... 28 ms
read() ... 28

Solution

It doesn’t look like fetch has implemented streaming support which means we can’t access long-running HTTP Streams in React Native.

Additional Information

• React Native version: latest 0.42.0
• Platform: iOS
• Operating System: OSX Sierra

[luciozambon]

Will react-native ever supports SSE/EventSource? Is there any plan to support SSE or not to include it? IMHO the support of SSE would be really appreciated

[mythz]

It’s not blocking me because I can periodically poll and auto-reconnect but the end-user UX is noticeably worse because RN fetch can’t handle long-running HTTP requests, I suspect other users would find their own way to workaround the issue given they still need to develop their Apps with whatever tools/API they have available but to dismiss this noncompliance and use-case as not an issue worth knowing about is IMHO a poor approach for maintaining a high-quality project.

Feel free to run your project as you like but I’d suggest using a label like up-for-grabs, low-priority or some other label that indicates the RN team wont be looking at it in the foreseeable future instead of just closing issues indiscriminately.

I’d be happy to leave this issue linger in the open state for another sixty days,

You’re not doing me any favors by leaving the issue open, I thought I was doing you a favor by reporting an issue and submitting a small, stand-alone, verifiable example - but clearly the RN team doesn’t view it as such so I’ll be saving us both time and refraining from submitting any issues in future.

though I am not sure that will solve your problem.

This issue isn’t my problem, it’s React Native’s problem with its W3C fetch implementation not functioning as expected. The other problem I see is how the RN team perceives the value of issues.