Multiple graphql composed in single component using common Higher order component

composed-graphql-using-commonhoc.js

import React, { PureComponent } from 'react';
import { View, Text } from 'react-native';
// No Need to Import Loading and error component every where

import withCommonQuery from './hoc/withCommonQueries';
import GET_LINEITEMS from './query/LineItem/GET_LINEITEMS';
import GET_DELIVERABLE_LIST from './query/Deliverables/GET_DELIVERABLE_LIST';
import GET_PROJECTROLE from './query/ProjectRoles/GET_PROJECTROLE';

class Dummy extends PureComponent {
  render() {
    const {
      getLineItem: { getLineItem },
      projectRoles: { projectRoles },
      deliverableList: { deliverableList },
    } = this.props;

    // No Need to handle on error and loader for each composed query
    // and hence not on all the screen where ever we are using

    // Work With Real Data
    console.log(getLineItem, projectRoles, deliverableList);

    return (
      <View>
        <Text>Work With Real Data</Text>
      </View>
    );
  }
}

export default withCommonQuery({
  queries: [
    {
      query: GET_LINEITEMS,
      name: 'getLineItem',
      options: props => ({
        variables: {
          id: props.deliverableId,
          projectId: props.projectId,
        },
      }),
    },
    {
      query: GET_PROJECTROLE,
      name: 'projectRoles',
      options: props => ({
        variables: {
          id: props.projectId,
        },
      }),
    },
    {
      query: GET_DELIVERABLE_LIST,
      name: 'deliverableList',
    },
  ],
})(Dummy);