ReactNative GrpcWebFetchTransport produces RpcError: premature end of response about protobuf-ts HOT 5 CLOSED

Hi there, just wanted to give an update and a bit of a guide on how I managed to get it to work:

As per your notes: React Native uses whatwg-fetch which DOES NOT support ReadableStream and the Body property. There is however the following: https://www.npmjs.com/package/react-native-polyfill-globals

From the react-native-pollyfill globals package we can actually patch the whatwg-fetch to support the body and FileReader.readAsArrayBuffer.

npm i @stardazed/streams-polyfill
npm install react-native-polyfill-globals
npm install -D patch-package
npx patch-package --patch-dir node_modules/react-native-polyfill-globals/patches

In index.js at the top add

import "@stardazed/streams-polyfill";

Once ReactNative is patched to support those mentioned above we can actually just run the GrpcWebFetchTransport as I did in the first post.

So yes actually React Native works with your library but you'll need to polyfill + use the patches in the linked package

from protobuf-ts.

Hey @kgoguevgoget,

the RpcError seems to originate here:

So the body property of the fetch response is null. It should be a ReadableStream<Uint8Array>, see MDN.

We need the ReadableStream for server streaming methods. We cannot just read the entire data using arrayBuffer() (see MDN), because then the client would only know about a response message when the entire response has been read.

The question is, why is body === null?

Apparently, react native uses the fetch API polyfill whatwg-fetch. See setUpXHR.js and fetch.js.

Unfortunately, this polyfill does not implement the body property, see JakeChampion/fetch#746

from protobuf-ts.

(sorry, my fat fingers hit enter by accident)

I see the following options:

1. determine whether the fetch polyfill added by react native is actually necessary, try to turn it off
2. implement a GrpcWebXhrTransport that uses a similar hack like grpc-web-react-native-transport

Could you have a look at option 1?

I guess this could look like this:

if (__DEV__) {
	(globalThis as any).fetch = (globalThis as any).originalFetch;
}

See https://medium.com/@kureevalexey/hi-birkir-gudjonsson-fb6299cd7e33 and https://github.com/facebook/react-native/blob/6e6443afd04a847ef23fb6254a84e48c70b45896/Libraries/Utilities/PolyfillFunctions.js

from protobuf-ts.

Ah Ok I will try to see if option 1 is a viable solution here.

As for option 2, I am afraid that my knowledge in typescript is not as adept as Go so I wouldn't be able to help out with that one but lets see if at least option 1 gets us further

Thanks for the quick response!

from protobuf-ts.

That's great news, thanks for the info. I have added a note in the manual with a link to this issue.

from protobuf-ts.