0

I'm trying to upload images from react-native application to apollo-server but I get the following error:

message: "Variable "$photo" got invalid value { uri: "file:///data/user/0/com.dummyapp/cache/react-native-image-crop-picker/IMG_20211028_171740.jpg", name: "1635453941000", type: "image/jpeg" }; Upload value invalid."

Server-side resolver mutation implementation

import { FileUpload } from "graphql-upload";

This is how FileUpload looks like in type definition of the module:

export interface FileUpload {
  filename: string;
  mimetype: string;
  encoding: string;
  createReadStream(): ReadStream;
}

I think I should be expecting this from client.

Client-side implementation

const USER_UPLOAD_AVATAR = gql`
    mutation userUploadAvatar($photo: Upload!) {
        userUploadAvatar(photo: $photo)
    }
`;

const avatarPhotoAsReactNativeFile = new ReactNativeFile({
  uri: avatarPhoto.path, // -> "file:///data/user/0/com.univarsity/cache/react-native-image-crop-picker/IMG_20211028_171740.jpg"
  name: avatarPhoto.modificationDate, // -> "1635453941000"
  type: "image/jpeg",
});

const [avatarPhotoUploadHandler] = useMutation(USER_UPLOAD_AVATAR, {
  variables: { photo:  avatarPhotoAsReactNativeFile },
  onCompleted: data => console.log(data),
  onError: error => console.log(error), 
});


const MyScreen = () => <Button title="upload avatar" onPress={avatarPhotoUploadHandler} />

This is the logic that I put together to get the error :D, any ideas would be greatly appreciated :)

Emad Baqeri
  • 2,333
  • 2
  • 14
  • 29
  • check network request https://github.com/jaydenseric/graphql-multipart-request-spec – xadm Oct 28 '21 at 21:58
  • @xamd Hey, thank you really much. Can you please tell me more about this? I have no idea what's wrong with this code. This is should work properly but not act as expected :/ – Emad Baqeri Oct 28 '21 at 22:58

0 Answers0