Getting Network request failed when uploading images with apollo client react native android

[zaidraddad94]

I am using ApolloClient to send mutation that contains files (images) but I am getting

Error: Network request failed

this what I have done to create links

import { createUploadLink } from 'apollo-upload-client' v ==>> "^15.0.0";

const uploadLink = createUploadLink({
        uri: API_URL,
        headers: {
          "Authorization": `Bearer ${token}`,
          'Content-Type': 'multipart/form-data',
          "Accept":"application/json"
        },
      });

this to handle errors

import { onError } from "@apollo/client/link/error"; v ==>> "^3.3.20"

   const errorLink = onError(({ graphQLErrors, networkError }) => {
        if (graphQLErrors)
          graphQLErrors.forEach(({ message, locations, path }) =>
            console.log(
              `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
            ),
          );
      
        if (networkError) console.log(`[Network zaid error]: ${networkError}`);
      });

then :

const client = new ApolloClient({
        cache: new InMemoryCache(),
        link: from([errorLink,uploadLink]),
        defaultOptions: {
          watchQuery: {
            fetchPolicy: 'cache-and-network',
            errorPolicy: 'none'
          },
          mutate: {
            mutation: "DocumentNode",
            errorPolicy: 'none'
          },
        },
      });

then I called the mutation :

       await client.mutate({

        mutation:
        gql`  
         mutation($data: PostCreatInput!, $files: [CustomCreateImages!]!) {
           createpost(data: $data, files: $files) {
              id
          }}`,

        variables: {

          data: {****},

          files:[{file:ReactNativeFile}]

         }
      
      
      }).then(response => {
        console.log(response);
        return response
      }).catch(response => {
        console.log(response);
        return response
      })

i used ReactNativeFile generated by apollo-upload-client

          new ReactNativeFile({
            uri:  "file:///storage/***.jpg",
            name: "a.jpg",
            type: "image/jpeg"
          });

I am using react native "react-native": "0.62.2" and I have a live server not using localhost I did check the server logs this request never left the mobile; there was no record of it on the server.

[zaidraddad94]

bug with React Native 0.62+ that messes up the configuration for multiform requests. It can be fixed by commenting out line 43 in android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java:

//builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 

[kockok]

bug with React Native 0.62+ that messes up the configuration for multiform requests. It can be fixed by commenting out line 43 in android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java:

//builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 

I'm using "react-native": "^0.68.2",, by commenting out that line does not solve the problem...

[Yemisrach15]

bug with React Native 0.62+ that messes up the configuration for multiform requests. It can be fixed by commenting out line 43 in android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java:

//builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 

I'm using "react-native": "^0.68.2",, by commenting out that line does not solve the problem...

Did you get any solution?

[t2]

I'm still having this issue too. Any update?

[phryneas]

Hi everyone, I fear this repository is the wrong place to get help on this :/

The code you are having problems with is part of https://github.com/jaydenseric/apollo-upload-client, and it seems that the problems are caused by a part of react-native-flipper.

We don't maintain either of those, so we can't really do anything about this.

I believe that this is a variant of the bug reported over in https://github.com/facebook/flipper/issues/1691 - so if that hasn't been properly fixed, it would be best if you opened a new issue over at the flipper repository to let them know about it.

As this is nothing we can do anything about, I'm closing the issue here - I hope you understand!

[t2]

@phryneas completely understand. Thank you!

[Yemisrach15]

@t2 This solved it for me. Might work for you too, hopefully.

[t2]

@Yemisrach15 I ended up needing to prefix the image uri with file:// on Android.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.