GraphQLDataWrapper.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import GenericErrorComponent from './GenericErrorComponent'
import GenericLoadingComponent from './GenericLoadingComponent'

class GraphQLDataWrapper extends Component {
  render () {
    const { data, error, ErrorComponent, loading, LoadingComponent, renderData, ...rest } = this.props

    // There was an error
    if (error) return <ErrorComponent />

    // Making the request
    if (loading) return <LoadingComponent />

    // Successful request!
    return renderData({ data, ...rest })
  }
}

GraphQLDataWrapper.propTypes = {
  data: PropTypes.object,
  error: PropTypes.object,
  ErrorComponent: PropTypes.element.isRequired,
  loading: PropTypes.bool.isRequired,
  LoadingComponent: PropTypes.element.isRequired,
  renderData: PropTypes.func.isRequired
}

GraphQLDataWrapper.defaultProps = {
  ErrorComponent: () => <GenericErrorComponent />,
  LoadingComponent: () => <GenericLoadingComponent />
}

export default GraphQLDataWrapper