How to do file uploads with Relay Modern mutations?

Question

I'm using react-relay/compat 1.1.0 and I need to write a mutation with the ability to upload a file. In Relay Classic you can use getFiles() to support file uploads in mutations:

class AddImageMutation extends Relay.Mutation {
   getMutation() {
     return Relay.QL`mutation{ introduceImage }`;
   }

   getFiles() {
     return {
       file: this.props.file,
     };
   }
   ...
}

But haven't found any trace of functionality for uploading files in Relay Modern docs:

const {commitMutation} = require('react-relay');

commitMutation(
  environment: Environment,
  config: {
    mutation: GraphQLTaggedNode,
    variables: Variables,
    onCompleted?: ?(response: ?Object) => void,
    onError?: ?(error: Error) => void,
    optimisticResponse?: ?() => Object,
    optimisticUpdater?: ?(store: RecordSourceSelectorProxy) => void,
    updater?: ?(store: RecordSourceSelectorProxy) => void,
    configs?: Array<RelayMutationConfig>,

    // files: ... ?
  },
);

Is that supported yet in relay modern? and if so, what's the way of doing it? Thanks.

Answer 1

You have to provide the files as object uploadables in the config object for commitMutation and then implement the actual upload in your Network Layer, because the fetch request to the server has to be a multipart form and not application/json.

See https://github.com/facebook/relay/issues/1844#issuecomment-316893590 for a complete example.