fetch stream

[wcastand]

Hi, is there any plan on adding support for stream in the fetch api or a polyfill?

using yoga-server and urql and i can't since it requires streams on the fetch api.

In theory, there is a polyfill but it's not up to date and seems to be abandoned. https://www.npmjs.com/package/react-native-fetch-api?activeTab=readme

[wcastand]

do we actually need to bump or like the discord no one really cares? :)

EDIT: Sorry, just a bit frustrated of never getting any answer here or on discord, most discussion seems to be ignored completely and all the issues i find are always closed by expo-bot even if the issue is never seen by someone from expo team or even fixed.

It's not always possible to offer a repo but that doesn't mean the issue doesn't exist and altho i try to help i can't spend 2 weeks a bug fix during work hours (guessing it's part of the expo team to handle the investigation, i don't ask my client to investigate their own problem on my app)

I just liked to know hours where expo team is available to help and see more interaction here or on discord because in more than a year of using expo i got help/answer once on discord and discussions and i'd rather not have to make tickets for every single things and annoy the support team when there is discord an github repo that are suppose to be there for this :/

[KishiTheMechanic]

We need the stream on TypeScript React Native.
From my quick research, I couldn't find the right repo so far.

How can we solve it?

[heethjain21]

The fetch package url which you shared works

Even though it's a bit old. I got it working a few days ago.

Can use this for reference: https://stackoverflow.com/a/77089139

Also check out the comment for if you're having issues with Android (it doesn't work in debug mode)

[robinsadeghpour]

I cannot call res.body.getReader() it always says Error: [TypeError: This stream has already been locked for exclusive reading by another reader]. Have you encountered this issue as well?

[heethjain21]

I don't remember, it has been quite a while.

here is my code if you want to use for reference:

      fetch(`${API_URL}`, {
        method: 'POST',
        headers: {
          // as per needed
        },
        body: JSON.stringify({
          // as per needed
        }),
        reactNative: { textStreaming: true },
        signal: abortController.signal, // Pass the AbortSignal to the fetch request
      })
        .then(response => response.body)
        .then(async (stream) => {

          const reader = stream.getReader();
          const decoder = new TextDecoder();

          // fetch is complete and chat bot started typing

          const processStream = async () => {
            const processChunk = async () => {

              const { done, value } = await reader.read();

              if (done) {
                //do something
                return;
              }

              const text = decoder.decode(value); // Convert the binary data to text
              resultText += text;

              setTimeout(processChunk); // Delay before processing the next chunk
            };
            processChunk();
          };
          processStream();
        }).catch((error) => {
          //do something
        }).finally(async () => {
          // do something
        });

abortController is for stopping the fetch api stream response in between. So with a function something like this

  const [abortController, setAbortController] = useState(new AbortController()); // not sure if using state here is the best solution. I had to do a bit experimenting and finally settle on this

  const handleStop = () => {
    try {
      if (abortController) {
        abortController.abort(); // Abort the fetch request
        setAbortController(new AbortController()); // set new controller for next fetch req
        // do other things
      }
    }
    catch (error) {
      console.error(error);
    }

  };

[ybentz]

@heethjain21 do streams work properly on Android for you? I got everything working with the polyfills and iOS works great but on Android what I'm seeing is a very long delay in first stream chunk and then it just "unloads" all the chunks at the same time when the stream closes. It's almost like there's a very big buffer that accumulates all the stream chunks and then flushes them all at the same time. I don't think it could have something to do with the polyfills because those are JS and the issue is only on Android so probably in native code.

I saw the comment about Android but I don't even have that Flipper file (I'm using Expo v50).

[heethjain21]

@ybentz I was on a bare react native project (without expo), so the Flipper file was related to that.

And it worked fine on Android for me.

What type of build/project are you on?

I can share the specific/particular Android files if needed

[ybentz]

@heethjain21 I'm on Expo 50 and it's a managed project. Did you mean anything Android specific? I'm not doing anything special on my end, just using Expo and building using EAS either locally or using their cloud service.