apolloQueryHOC.js

import React from 'react';
import { withApollo } from 'react-apollo';
import { logger } from '$utils';

export default (Component, queryOptions, queryAfterMount = true) => withApollo(
  class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { data: { loading: true } };
    }

    componentDidMount() {
      if (queryAfterMount) this.queryData();
    }

    queryData = () => {
      this.props.client.query(queryOptions)
      .then(({ data }) => this.setState({ data }))
      .catch((err) => {
        logger(err);
        return this.setState({ data: { loading: false, error: true } });
      });
    }

    cancelLoading = () => this.setState({ data: { loading: false } })

    render = () => (
      <Component
        {...this.props}
        data={this.state.data}
        queryData={this.queryData}
        cancelLoading={this.cancelLoading}
      />
    );
  },
);