Example with file uploader component

Uploader.js

import React from 'react'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
import { pipe, prop } from 'ramda'

type FileInputProps = {
  label: string,
  onChange: Function,
  required: boolean,
  dataCy: string,
}

const FileInput = (props: FileInputProps) => (
  <div className="up-pic-btn-container upload-btn">
    <label>
      <input type="file" {...props} data-cy={props.dataCy} />
      {props.label}
    </label>
  </div>
)

type SingleUploaderProps = {
  mutate: Function,
  onUpload: Function,
  label: string,
}

const SingleUploader = (props: SingleUploaderProps) => {
  const handleChange = ({ target }) =>
    target.validity.valid &&
    props
      .mutate({
        variables: { file: target.files[0] },
      })
      .then(
        pipe(
          prop('data'),
          prop('uploadPhoto'),
          props.onUpload,
        ),
      )

  return <FileInput required onChange={handleChange} {...props} />
}

const query = gql`
  mutation($file: Upload!) {
    uploadPhoto(photo: $file) {
      id
      url
    }
  }
`

export default graphql(query)(SingleUploader)