0

I am using URQL as my react native graphql client. I like using the library but there doesn't seem to be an easy way to upload files selected from the expo image picker to my node server.

I did some googling, found a Ben Awad video where he uses ReactNativeFile to convert the result to a file. The issue is that this is the only way it seems fit for an apollo client. Is there something like this for urql? What would the code look like to convert the uri & base64 to a JS file?

...
if (!imageResult.cancelled) {
  const file = new ReactNativeFile({
    uri: imageResult.uri,
    type: imageResult.type,
    name: "picture"
  });

image selection fn

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsEditing: true,
  base64: true,
  aspect: [1, 1],
  quality: 1,
});
if (result.cancelled || !result.uri || !onSuccessful) return;
await onSuccessful(result);
Richard Wilson
  • 297
  • 4
  • 17
jmecs
  • 143
  • 2
  • 13

1 Answers1

0

According to source code of the ReactNativeFile class (extract-files/public/ReactNativeFile.js) it just returns the same values you've entered. I don't see a problem to use plain object with same data. If you want to use this, you can, apollo-upload-client only exports ReactNativeFile from extract-files library (apollo-upload-client/public/ReactNativeFile.js)

Probably apollo-client checks if it is instanceof ReactNativeFile class but, I don't think URQL checks it.

You should follow the official URQL documentation for file uploads, and do not use apollo https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/#file-uploads

Ugur Eren
  • 1,968
  • 2
  • 11
  • 21
  • I didn't notice that it just returns a plain object. This helps a lot. I have replaced my fetchExchange with the mutlipartfetchexchange. I just need a way to convert the expo-image-picker result into a file my URQL graphql client will accept. It looks like Ben uses the following code for apollo here, but this doesn't help me with my urql client. https://github.com/benawad/fullstack-graphql-airbnb-clone/blob/78b1b03542eaf4f0d038469c360e053267e598c9/packages/server/src/modules/listing/create/resolvers.ts#L29 – jmecs Oct 29 '21 at 23:27
  • @jmecs URQL documents says you can use extract-files package, and since apollo-upload-client only exports it from extract-files, you can follow that youtube video and only change the import ReactNativeFile from `extract-files` instead of `apollo-upload-client` – Ugur Eren Oct 29 '21 at 23:36