Relay Modern Utils to reduce QueryRenderer boilerplate

RelayModernUtils.js

// @flow
import React from 'react';
import hoistStatics from 'hoist-non-react-statics';
import RelayStore from './RelayStore';
import ErrorView from './components/common/Error';
import LoadingView from './components/common/LoadingView';

import type {
  Environment,
  ClassicEnvironment,
  GraphQLTaggedNode,
  Variables,
} from 'react-relay';

import {
  QueryRenderer,
} from 'react-relay/compat';

type Config = {
  query: ?GraphQLTaggedNode,
  variables?: Variables,
};

export default function createQueryRenderer(FragmentComponent: ReactClass<*>, Component: ReactClass<*>, config: Config): ReactClass<*> {
  const {
    query,
    variables,
  } = config;

  class QueryRendererWrapper extends React.Component {
    render() {
      return (
        <QueryRenderer
          environment={RelayStore._env}
          query={query}
          variables={variables}
          render={({ error, props }) => {
            console.log('wrapper: ', error, props);
            if (error) {
              return <ErrorView error={error} />
            }

            if (props) {
              return <FragmentComponent {...this.props} {...props} />
            }

            return <LoadingView />
          }}
        />
      );
    }
  }

  return hoistStatics(QueryRendererWrapper, Component);
}

@GrigoryPtashko this was in a transition phase from classic to modern

the idea is to use react-relay when the migration is done