How can I use React component as an enhancer? - reactjs

Question

I'm a newbie and React and I've got the following piece of code:
class MyCoolComponent extends React.Component {
render() {
return (
<QueryRenderer
environment={environment}
query={graphql`
query UserQuery {
viewer {
id
}
}
`}
variables={{}}
render={({error, props}) => {
if (error) {
return <div>Error!</div>;
}
if (!props) {
return <div>Loading...</div>;
}
return <div>User ID: {props.viewer.id}</div>;
}}
/>
);
}
}
I want to use this React component as an enhancer to a different React Component to pass the data (props.viewer.id) using compose(addDataEnhancer, ...) to the other High Order Component (such that it'll be able to use props.viewer.id). How can I do it?
The context: the idea is to use this MyCoolComponent as a replacement for the data source function here:
export default compose(
// data source
graphql(gql`query MyQuery1 { ... }`),
)(MyHOCComponent);
function MyHOCComponent({ data }) {
console.log(data);
}

Answer 1

I think this should work. compose will call first hoc with base component, than return value (wrapped component) is passed to next hoc (next compose argument), etc...
Base component (and every HOC listed after this HOC) will have prop viewerId
// withViewerId.js
import React from 'react'
import { QueryRenderer, graphql } from 'react-relay'
import environment from 'environment'
export default (BaseComponent) => (restProps) => (
<QueryRenderer
environment={environment}
query={graphql`
query UserQuery {
viewer {
id
}
}
`}
variables={{}}
render={({error, props}) => {
if (error) {
return <div>Error!</div>;
}
if (!props) {
return <div>Loading...</div>;
}
return <BaseComponent {...restProps} viewerId={props.viewer.id} />;
}}
/>
)
usage:
import withViewerId from 'withViewerId'
export default compose(withViewerId)(BaseComponent)