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.

Answer 2

Found this question as I just had the same one myself.

Not sure of the complete answer yet, but I'm starting to read through the Relay source and based on packages/relay-runtime/mutations/commitRelayModernMutation.js it looks like you can pass uploadables to your mutation.