React Native: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'. at new ApolloError

Question

I am trying to upload image from my react native app to graphql by using Apollo client with createUploadLink(). When I am trying to mutate data by passing a ReactNativeFile as a variable, then it says

"network request failed: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'. at new ApolloError ".

This this the mutation which i am trying to use

  mutation publishPost(
    $content: String!
    $LocationInput: LocationInput!
    $InputPostAttachment: [InputPostAttachment!]
  ) {
  publishPost(
    content: $content
    location: $LocationInput
    attachments: $InputPostAttachment
  ) { 
      content
     }
  }

InputPostAttachment has type

type InputPostAttachment {
   type: PostAttachmentType!
   file: Upload!
}

Apollo client settings and i am using apollo-upload-client

const httpLink = createUploadLink({
  uri: 'http://localhost:8000/graphql',
});

const authLink = setContext(async (headers: any) => {
  const token = await getToken();
  return {
    ...headers,
    headers: {
      authorization: token ? `Bearer ${token}` : null,
    },
  };
});

const link = authLink.concat(httpLink);

// create an inmemory cache instance for caching graphql data
const cache = new InMemoryCache();

// instantiate apollo client with apollo link instance and cache instance
export const client = new ApolloClient({
  link,
  cache,
});

File upload Function and i am using react-native-image-crop-picker for multi image selection

  const [image, setimage] = useState([]);

  const _pickImage = () => {
    ImagePicker.openPicker({
      includeBase64: true,
      multiple: true,
    }).then((images: any) => {
      let imageData: any = [];
      images.map((data: any) => {
        const file = new ReactNativeFile({
          uri: data.path,
          name: data.filename,
          type: data.mime,
        });
        imageData.push({
          type: 'IMAGE',
          file: file,
        });
      });
      setimage(imageData);
      console.log(images);
    });
  };

  const handlePost = async () => {

    const InputPostAttachment: any = [...image];

    const LocationInput = {
      place: place,
      vicinity: vicinity,
      province: province,
    };

    publishPost({variables: {content, LocationInput, InputPostAttachment}})
      .then(({data}) => {
        console.log(data);
        props.navigation.navigate('Home');
      })
      .catch((err) => {
        console.log('err happened');
        console.log(err);
      });
  };

could someone please help me out from this?

Naveen Pandurangi Naveen Pandurangi · Accepted Answer · 2020-04-11T19:23:28

My apollo-client was configured using apollo-boost and i was using chrome debugger to intercept the network was causing me this issue.

To be more specific I was using the below code to get the network requests sent by my app in the chrome debugger

global.XMLHttpRequest =
  global.originalXMLHttpRequest || global.XMLHttpRequest;
global.FormData = global.originalFormData || global.FormData;

if (window.FETCH_SUPPORT) {
  window.FETCH_SUPPORT.blob = false;
} else {
  global.Blob = global.originalBlob || global.Blob;
  global.FileReader = global.originalFileReader || global.FileReader;
}

apollo-upload-client wont send the data in multipart data if we are using chrome debugger. We will face network issue.This issue has the answer. or I had not removed apollo-boost and some part of my app was using it that was also a issue.

React Native: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'. at new ApolloError

1 Answers