CODEWITHSUNDEEP
androidreact-nativegraphqlapollo-clientreact-native-fs
Johannes Vitt
Johannes Vitt

Reputation: 61

Uploading a file to GraphQL using Apollo Client

I am currently trying to upload a file (an image from RNCamera) from a react native android app to a GraphQL backend. However, the backend always returns status code 400.

So far, I have tried using another query that only requires a string (instead of the $file argument) and that worked. So the Apollo Client seems to be set up correctly. I have also tried sending files to the backend using curl. That worked fine as well.

import { API_URL } from 'src/utils/config';    
import { ApolloClient, InMemoryCache, ApolloLink, gql } from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';
import { UPLOAD_PICTURE } from 'src/utils/query';

var RNFS = require('react-native-fs');

// Instantiate required constructor fields
const cache = new InMemoryCache();
const link = ApolloLink.from([
  createUploadLink({
    uri: API_URL
  })
]);

const client = new ApolloClient({
  // Provide required constructor fields
  cache: cache,
  link: link
});

Executing the mutation:

// read the image that was saved as a file
const file = {
    file: await RNFS.readFile(action.picture.uri, 'base64')
  };

// send the file to the backend
 client
    .mutate({
      mutation: gql(UPLOAD_PICTURE),
      variables: file
    })

From src/utils/query:

export const UPLOAD_PICTURE = `
mutation ($file: Upload!){
  uploadFile(file: $file)
}
`;

The GraphQL schema in the backend:

type File {
    uri: String!
    filename: String!
    mimetype: String!
    encoding: String!
  }

//...

type Mutation {
  //...
  uploadFile(file: Upload!): File
}

Upvotes: 1

Views: 5672

Answers (1)

Johannes Vitt
Johannes Vitt

Reputation: 61

I found the solution to my problem. The file has to be of type ReactNativeFile (more info here). The code now looks like this:

...    
const file = new ReactNativeFile({
        uri: action.picture.uri,
        name: 'name.jpg',
        type: 'image/jpeg'
    });
...

There was also a 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));

Upvotes: 2

Related Questions