Support ReactNativeFile with file upload

[elilabes]

Hi there, I have spent the last few days battling file uploads in React Native.

I am using graphql-upload and have file uploads working on the web as expected. However, I haven't been able to get it working on react-native.

I see that using Apollo Client there is a ReactNativeFile that handles files for React Native. However, with Urql there is only Blob and File checks support.

This works fine on the web as it has File and Blob support, however React Native doesn't have the same support for this.

I am wondering what the recommended way of supporting React Native is for Urql with Graphql Upload? Thanks 😄

[elilabes]

Okay, after digging through the source code I add the now deprecated @urql/exchange-multipart-fetch as it uses extract-files v11 that still has the check for ReactNativeFile. This is obviously not great, but it works 🚀 .

It'd be great to be able to customise the check that urql does for detecting when to use a multipart file.

[kitten]

I'm not aware of a ReactNativeFile global in React Native. So, I'm assuming this may be an extract-files thing.

If you're referring to apollo-upload-client (which btw isn't official and not just Apollo Client 😅) they seem to depend on an outdated version of extract-files, (v11), whereas v12 removes ReactNativeFile.
@urql/exchange-multipart-fetch does indeed use an outdated version of extract-files as well, since it's deprecated and we actually delayed upgrades there, so it also still has the "ponyfill".

I'd refer to the decision stated in extract-files’ changelog:

It’s the responsibility of Facebook to adhere to web standards and implement spec-complaint File, Glob, and FormData globals in the React Native environment.

Which actually also applies to a bunch of other APIs that are unavailable on React Native and hence limis features in @urql/core that can be used on React Native.

Anyway, FormData seems to be declared as a global in React Native. I'm also seeing hints of File: https://github.com/facebook/react-native/blob/0fb71630c7d4eff5758f7148ae2d9b1f09bc9d2c/packages/react-native/types/modules/globals.d.ts#L88-L117

I currently can't test this myself, and don't have time to look up whether File was recently added in React Native as a global, but if it hasn't, as long as you polyfill a global File and reuse this class for files passed to @urql/core variables, then the built-in support will work

[elilabes]

Thanks for the prompt reply!

You are right - ReactNativeFile is apart of extract-files

It’s the responsibility of Facebook to adhere to web standards and implement spec-complaint File, Glob, and FormData globals in the React Native environment.

💯 agree here - however it seems that they haven't yet. When I use the File constructor on react-native , on iOS the file gets uploaded with 0 bytes and it seems all the prototype methods are missing (which would make sense). On Android it didn't work at all.

I am relatively new to uploading files myself other than libraries like S3 / Firebase / Supabase that abstract a lot of the stuff away. We use Expo and a lot of the workarounds for Blob support only work in react-native as they require native code (we use expo so can't use them)

as long as you polyfill a global File and reuse this class for files passed to @urql/core variables, then the built-in support will work

I'll take a look at this!