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.

Rupert Angermeier · Accepted Answer · 2017-11-02T19:33:02.760

4

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.

edited Nov 02 '17 at 19:33

answered Nov 02 '17 at 08:37

Rupert Angermeier

900
7
10

I don't get how to do it with `useMutation` – Fernando Montoya Nov 10 '21 at 21:24

score 1 · Answer 2 · answered Jul 30 '17 at 19:49

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.

How to do file uploads with Relay Modern mutations?

2 Answers2