fetch implementation does not support streams from the spec - needs implementation in React Native core

[pcowgill]

React Native has not implemented fetch on top of native APIs, and the fetch polyfill built on top of XHR does not support streams where response.body is a getter for a ReadableStream.

React Native version:

0.61.4

Steps To Reproduce

Use fetch and see that response.body is undefined rather than a getter for a ReadableStream according the the fetch spec.

Describe what you expected to happen:

I expected for response.body to be defined.

Related issues

https://github.com/facebook/react-native/issues/9629 https://github.com/facebook/react-native/issues/12912 https://github.com/github/fetch/issues/746#issuecomment-573251497 (cc @MattiasBuelens)

[pcowgill]

React Native also has a Canny board for feature requests I previously was unaware of. If you come across this GitHub issue and care about this feature being prioritized, please feel free to upvote it over there as well. Thanks!

https://react-native.canny.io/feature-requests/p/fetch-streaming-body

[pcowgill]

Let's create a fork of github/fetch under the Facebook org so we can open pull requests against it without worrying about breaking legacy browsers that are using github/fetch.

As discussed here https://github.com/github/fetch/issues/746

cc @hugomrdias @cpojer

[pcowgill]

Can we create that fork of github/fetch under the Facebook org?

It looks like improvements to the current fetch solution are getting lots of upvotes on Canny: https://react-native.canny.io/feature-requests/p/fetch-streaming-body https://react-native.canny.io/feature-requests/p/implement-fetch-using-native-implementations-instead-of-fetch-on-top-of-xhr

[cpojer]

The Facebook GitHub org only contains project managed by Facebook. It'll mean we have to take care of releases and everything. I'm not sure if that's a good idea, you'll probably be able to move faster on a separate org. What about react-native-community? @alloy can get you set up with that.

[alloy]

@pcowgill If you’re interested in spear-heading that effort in the react-native-community org, please contact me at [email protected] to get the process started.

[pcowgill]

@cpojer @alloy Thanks for getting back to me! I think that could work. @hugomrdias Do you think that will serve our needs?

We should still keep this issue open though, because eventually we'll want to have a spec-compliant implementation of fetch at the native level in React Native.

[alloy]

Just created the fork and added you, @pcowgill https://github.com/react-native-community/fetch

[pcowgill]

@alloy Thanks! After something is published from that fork and we've tested the polyfill thoroughly, we'll want to make a PR to use the new npm package here https://github.com/facebook/react-native/blob/507379f6faba37e483610e4c35033e7b8d260eb4/Libraries/Network/fetch.js#L16

If anyone else would like to collaborate on that fork, just comment here!

[hugomrdias]

Just created the fork and added you, @pcowgill react-native-community/fetch

can you please add me too, thanks

[pcowgill]

@hugomrdias You should have an invite in your email inbox now. Thanks!

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[pcowgill]

This issue still requires the community's attention. Thanks!

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[hoangpham95]

@pcowgill Interested in this issue. Looking from the surface, do you think it's beneficial to use a different polyfill for fetch?

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[tom-sherman]

I am really interested in bringing spec-compliant fetch to react native. I think there's renewed interest in the OSS community and JS developers to standardise where possible as seen in adding fetch to node.js core and the work Cloudflare, Vercel, Shopify et al are doing in WinterCG.

A spec compliant fetch also aligns with React Native's goals IMO.

Has there been any discussion in how to bring spec compliant fetch to React Native? The polyfill fork is a good start but I'm not sure the caveats especially around performance and bundle size make it suitable for general adoption.

[mauricedoepke]

It is also woth to mention, that with the current state of react natives fetch implementation the new graphql features @defer and @stream don't work. But that is probabbly more related to this issue: https://github.com/facebook/react-native/issues/12912

[codergautam]

any update?

[taixw2]

When generative AI became popular, SSE became the dominant API response when developing AI apps, so it became urgent to satisfy stream, otherwise a lot of AI apps would be lost, and people had to use ionic/flutter/native to realize this feature.

[taixw2]

On iOS, I can successfully receive a text stream using https://github.com/react-native-community/fetch, and I suggest try this library

[codergautam]

Thanks a ton!!

[codergautam]

Made a blog post just about how to implement this using the Community fetch polyfill (streaming works like a charm in RN now!)

https://blog.codergautam.dev/how-to-use-streaming-fetch/

EDIT- SEE MY NEW SO ANSWER FOR STEPS TO USE IT: https://stackoverflow.com/questions/56207968/stream-api-with-fetch-in-a-react-native-app/77089139#77089139

I'm using it for OpenAI API and works perfectly

[sergei-stralenia]

Made a blog post just about how to implement this using the Community fetch polyfill (streaming works like a charm in RN now!)

https://blog.codergautam.dev/how-to-use-streaming-fetch/

Hey man, the article link you sent doesnt't work. Do you have another one? 🙏 Solving the same problem you've done

[codergautam]

My bad, I recently took down my blog since it was not getting enough traffic (I started it as an experiment) Anyways you can see the usage on one of my Stackoverflow Answers: https://stackoverflow.com/questions/56207968/stream-api-with-fetch-in-a-react-native-app/77089139#77089139

[fukemy]

can someone help me, stream not working with my IOS simulator : https://github.com/react-native-community/fetch/issues/24