Error: Network error: Network request failed

[smithaitufe]

This is similar to #45

What are you doing

I am trying to use apollo-upload-client to enable me upload files from my mobile app

const httpLink = createUploadLink({ uri: httpUri });
const authLink = setContext(async (req, { headers }) => {
  const token = await getUserJWT()
  return {
    headers: {
      ...headers,
      authorization: token
    }
  }
})
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const link = ApolloLink.split(
  operation => {
    const operationAST = getOperationAST(operation.query, operation.operationName);
    return !!operationAST && operationAST.operation === 'subscription';
  },
  new WebSocketLink({
    uri: wsUri,
    options: {
      reconnect: true, //auto-reconnect
      connectionParams: {
        authorization: getUserJWT
      }
    }
  }),
  errorLink.concat(authLink.concat(httpLink))
);



const cache = new InMemoryCache();

persistCache({
  cache,
  storage: AsyncStorage,
});


const client = new ApolloClient({
  link,
  cache
});

and my mutation is this

validateCard: async ({ senderFirstName, senderLastName, senderPhoneNumber, senderFacebook, senderTwitter, senderWhatsapp, senderInstagram, senderImage, recipientFirstName, recipientLastName, recipientPhoneNumber, recipientFacebook, recipientTwitter, recipientWhatsapp, recipientInstagram, recipientImage, artistId }) => {
            senderImage = new ReactNativeFile(senderImage)
            recipientImage = new ReactNativeFile(recipientImage)
            console.log(senderImage)
            
            try {
                const { data: { validateCard: { ok, errors, senderFirstNameAvailable, senderLastNameAvailable, recipientFirstNameAvailable, recipientLastNameAvailable, suggestedArtists }}} = await validateCardMutation({ variables: {
                    input: { 
                        senderFirstName, 
                        senderLastName, 
                        senderPhoneNumber, 
                        senderFacebook, 
                        senderTwitter, 
                        senderWhatsapp, 
                        senderInstagram, 
                        senderImage, 
                        recipientFirstName, 
                        recipientLastName, 
                        recipientPhoneNumber, 
                        recipientFacebook, 
                        recipientTwitter, 
                        recipientWhatsapp, 
                        recipientInstagram, 
                        recipientImage,
                        artistId
                     }
                }})
                return {
                    ok,
                    error: formatErrors(errors),
                    senderFirstNameAvailable, 
                    senderLastNameAvailable, 
                    recipientFirstNameAvailable, 
                    recipientLastNameAvailable, 
                    suggestedArtists
                }                

            } catch (error) {
                console.log("We encountered the following error: ", error)
            }
        }
    })

in my server, I have this for my graphql server

const schema = makeExecutableSchema({ 
    typeDefs,
    resolvers,
})

export default function (host, port, database) {
    
    const graphQLServer = express();

    graphQLServer.use(cors({ origin: '*'}))
    graphQLServer.use(bodyParser.urlencoded({ extended: true }), bodyParser.json())
    graphQLServer.use(authMiddleware)
    graphQLServer.use('/graphql', uploadMiddleware)
    graphQLServer.use('/graphiql', graphiqlExpress({
        endpointURL: '/graphql',
        subscriptionsEndpoint: `ws://${config.ws.HOST}:${config.ws.PORT}/${config.ws.PATH}`,
    }));
    graphQLServer.use('/graphql', apolloUploadExpress(), graphqlExpress(req => {
        console.log(req.body)
        return {
            schema,
            context: {
                db: database,
                user: req.user,
                JWT_SECRET: config.secrets.JWT
            }
        }
    }))

    return graphQLServer.listen(port, () => {
        console.log(`GraphQL Server is now running on http://${host}:${port}`)
        new SubscriptionServer(
            {
                schema,
                execute,
                subscribe,
            },
            {
                server: graphQLServer,
                path: '/subscriptions',
            }
        )
    })
    
}

my scalar is this

scalar FileUploadObject

and resolver is this

//import the GraphQLUpload function
import { GraphQLUpload } from 'apollo-upload-server'

//added to other functions in the resolvers object
FileUploadObject: GraphQLUpload

and my graqhql definition

input CardValidationInput {
        senderFirstName: String
        senderLastName: String
        senderPhoneNumber: String
        senderFacebook: String
        senderWhatsapp: String
        senderTwitter: String
        senderInstagram: String
        senderImage: FileUploadObject
        recipientFirstName: String
        recipientLastName: String
        recipientPhoneNumber: String
        recipientFacebook: String
        recipientWhatsapp: String
        recipientTwitter: String
        recipientInstagram: String
        recipientImage: FileUploadObject #This is the part that should contain the uploaded file
        artistId: Int                        
    }

What do you expect

When I tap the button, my input should be posted to the server

What are you experiencing

It keeps throwing this error

Error: Network error: Network request failed

[smithaitufe]

I noticed the cause of the error I was experiencing.

{
name: undefined,
type: "image",
uri: "file:///...."
}

It is clear to me now that name cannot be undefined