how to upload files using graphql + apollo client

edit.rb

# app/graphql/mutations/your_model/edit.rb
# http://guides.rubyonrails.org/autoloading_and_reloading_constants.html
# create directories corresponding module structure, so you don't need to setup autoload_paths
module Mutations
  module YourModel
    Edit = GraphQL::Relay::Mutation.define do
      name "YourModelEdit"

      input_field :id,        !types.ID
                              # make sure constant matches with your environment's
      input_field :file,      !Types::Scalars::FileType
      return_field :results,  !types.Boolean

      resolve ->(obj, args, ctx) {
        YourModel.find(args[:id]).update avatar: args[:file]
        {results: true}
      }
    end
  end
end

file_type.rb

# app/graphql/types/scalars/file_type.rb
# http://guides.rubyonrails.org/autoloading_and_reloading_constants.html
# create directories corresponding module structure, so you don't need to setup autoload_paths

# this custom scalar type will be used for a mutation input parameter
module Types
  module Scalars
    FileType = GraphQL::ScalarType.define do
      name "File"
      description "action_dispatch_uploaded_file"
      coerce_input ->(action_dispatch_uploaded_file, ctx) {
        action_dispatch_uploaded_file
      }
    end
  end
end

FileUploadComponent.jsx

class FileUploadComponent extends Component{
  upload(){
    this.props.mutate({
      variables: {
        id,
        avatar: this.inputFile.files[0] //this is how you send file
      }
    }).
    then(({data}) => {
      console.log(data)
    })
  }

  render(){
    return(
      <input type="file" ref={(input) => this.inputFile = input} />
    )
  }
}

Mutation = gql`
mutation YourModelEdit($input: YourModelEditInput!){
  YourModelEdit(input: $input){
    results
  }
}
`
export default graphql(Mutation)(Upload)

graphql_controller.rb

# https://github.com/jaydenseric/apollo-upload-client
# sends params[:operations] on multipart submission
# fix query and variables before the #execute

# params["variables.file"] is a regular ActionDispatch::Http::UploadedFile object
def execute
  context = {
    # Query context goes here, for example:
    # current_user: current_user,
  }

  if params[:operations].present?
    operations = ensure_hash(params[:operations])
    variables = {
      "input" => operations[:variables].
                  merge({"file" => params["variables.file"]})
    }
    query     = operations[:query]
  else
    variables = ensure_hash(params[:variables])
    query     = params[:query]
  end

  result = YourRailsAppSchema.execute(query, variables: variables, context: context)
  render json: result
end