-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fetch implementation does not support streams from the spec - needs implementation in React Native core #27741
Comments
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 |
Let's create a fork of As discussed here JakeChampion/fetch#746 |
Can we create that fork of It looks like improvements to the current |
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. |
@pcowgill If you’re interested in spear-heading that effort in the react-native-community org, please contact me at |
@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. |
Just created the fork and added you, @pcowgill https://github.com/react-native-community/fetch |
@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 react-native/Libraries/Network/fetch.js Line 16 in 507379f
If anyone else would like to collaborate on that fork, just comment here! |
can you please add me too, thanks |
@hugomrdias You should have an invite in your email inbox now. Thanks! |
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. |
This issue still requires the community's attention. Thanks! |
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 Interested in this issue. Looking from the surface, do you think it's beneficial to use a different polyfill for |
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. |
any update? |
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. |
On iOS, I can successfully receive a text stream using https://github.com/react-native-community/fetch, and I suggest try this library |
Thanks a ton!! |
Made a post just about how to implement this using the Community fetch polyfill (streaming works like a charm in RN now!) I'm using it for OpenAI API and works perfectly |
This PR adds the `stream` function to the React-Native gRPC transport. Because the `fetch` API is not fully implemented in React-Native (see issue [here](facebook/react-native#27741)), I had to polyfill the missing `fetch` function (package [here](https://github.com/react-native-community/fetch)) and replaced some functions in the global namespace (see [here](https://github.com/acostalima/react-native-polyfill-globals)). On Android, text-streaming doesn't work out-of-the-box on the `debug` variant. One solution is to comment the `NetworkFlipperPlugin` (see [here](react-native-community/fetch#13 (comment))). Because we don't use it for the moment, I commented that plugin. I added a `HelloStream` API function to test the stream feature. We can call it in Reac-Native by doing this: ```typescript for await (const res of clientInstance.helloStream(new HelloStreamRequest({ name: 'd4ryl00' }))) { console.log(res.greeting); } ``` Signed-off-by: D4ryl00 <d4ryl00@gmail.com>
Hey man, the article link you sent doesnt't work. Do you have another one? 🙏 |
My bad, I recently took down my blog since it was not getting enough traffic (I started it as an experiment) |
can someone help me, stream not working with my IOS simulator : react-native-community/fetch#24 |
@kelset | @javache | @TheSavior; both @tom-sherman and @taixw2 present compelling arguments for why this issue should be resolved promptly. |
React Native seems don't think AI is important... |
@codergautam Have you seen any performance issues with this implementation using polyfills? In our experiments, the non stream response was always much faster than waiting for the full stream to finish. |
Is there any current blocker to implementing it in the core? Probably it's easier now that there's a community effort to polyfill readable streams / streaming in fetch |
+1. |
☝️ Inspired by this, I managed to come up with the following solution:
// This file was adapted from: https://github.com/facebook/react-native/issues/27741#issuecomment-2362901032
import { polyfill } from 'react-native-polyfill-globals/src/fetch';
polyfill();
// 👇 https://stackoverflow.com/a/77744609/14056591
import { ReadableStream as ReadableStreamPolyfill } from 'web-streams-polyfill/dist/ponyfill';
// @ts-ignore
globalThis.ReadableStream = ReadableStreamPolyfill;
// https://stackoverflow.com/a/78858040/14056591
import 'text-encoding';
// Needed for TypeScript:
declare global {
interface RequestInit {
/**
* @description Polyfilled to enable text ReadableStream for React Native:
* @link https://github.com/facebook/react-native/issues/27741#issuecomment-2362901032
*/
reactNative?: {
textStreaming: boolean;
};
}
}
fetch('https://jsonplaceholder.typicode.com/todos/1', {
// https://github.com/facebook/react-native/issues/27741#issuecomment-2362901032
reactNative: { textStreaming: true }
}).then(response => {
const reader = response.body.getReader();
const decoder = new TextDecoder();
....
}) |
Full Solution for React Native Text Streaming👉 https://gist.github.com/aretrace/bcb0777c2cfd2b0b1d9dcfb805fe2838 |
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 aReadableStream
.React Native version:
0.61.4
Steps To Reproduce
Use
fetch
and see thatresponse.body
is undefined rather than a getter for aReadableStream
according the the fetch spec.Describe what you expected to happen:
I expected for
response.body
to be defined.Related issues
#9629
#12912
JakeChampion/fetch#746 (comment) (cc @MattiasBuelens)
The text was updated successfully, but these errors were encountered: