Can't upload image using react-native, GraphQL and urql

Question

So I'm trying to send an image to our server with react native using GraphQL query and I don't know why but it always return an error : [CombinedError: [Network] Network request failed].

The query :

import { graphql } from '../../gql';
import { gql, useMutation } from 'urql';

const AddProfilePicture_Mutation = graphql(`
mutation AddPicture_Mutation ($userId: ID!, $picture: Upload!) {
  uploadProfilePicture(input: {
    userId: $userId
    picture: $picture
  }) {
    id
  }
}`);

export const useAddProfilePicture = () => {
  const [{fetching, error}, execute] = useMutation(AddProfilePicture_Mutation);
  return {
    error: !!error,
    fetching,
    addProfilePicture: execute,
  }
}

and the code :

const pictureHandler = async () => {
    const options = {
      mediaType: 'photo' as MediaType,
      includeBase64: true,
      selectionLimit: 1,
    };
    
    const profilePicture = await launchImageLibrary(options);
    
    if (profilePicture.assets?.[0].fileSize && profilePicture.assets?.[0].fileSize > MAXFILESIZE) {
      showError(t('profileScreen.PictureSize'));
    }
    if (profilePicture.assets?.[0].uri && profilePicture.assets[0].fileName && profilePicture.assets[0].type) {
      // const myBlob = await fetch(profilePicture.assets[0].uri).then(r => r.blob());
      
      const blob = new Blob([profilePicture.assets[0].base64 as BlobPart], {
        type: profilePicture.assets[0].type,
      });
      
      const file = new File([blob], profilePicture.assets[0].fileName, { type: `${profilePicture.assets[0].type}`});
      
      const {error} = await addProfilePicture(
          { userId: userId!, picture: file},
          { fetchOptions: { headers: { 'graphql-require-preflight': '' } } }
        );
      if (!error) {
        showSuccess(t('profileScreen.PictureSuccessAdded'));
        navigation.navigate('UserProfile');
      } else {
        console.log(error);
        showError(t('profileScreen.PictureErrorAdded'));
      }
    };
  };

I've been trying everything I found on the web, Formdata, react-native-blob-util and rn-fetch-blob. If I try sending anything else then a File, the server reject it and says for exemple: Variable 'picture' has an invalid value: Expected type org.springframework.web.multipart.MultipartFile but was java.util.LinkedHashMap]

Update : After long research and help from other programmers. We never did found the answer. We open a new access point in the backend specifically for the uploaded picture and used a regular fetch post.

Can't upload image using react-native, GraphQL and urql

0 Answers0