fake-query-final.js

import React, { Component } from 'react';
import { gql } from 'apollo-boost';
import { withApollo } from 'react-apollo';

class Query extends Component {
  state = {
    data: null,
    loading: true
  }
  
  async componentDidMount(){
    const { query, client } = this.props;
    const clientQuery = await client.query({query});
    this.setState({...this.state, ...clientQuery});
  }
  
  render(){
    return this.props.children(this.state);
  }
}

const FakeQuery = withApollo(Query);

const MyComponent = (props) => {
  return (
    <FakeQuery
      query={MY_QUERY}>
      { ({loading, data}) => {
        if(loading) return 'Loading';
        const { things } = data;
        return (
          <div>
            {things.map(({id, text})=><p key={id}>{text}</p>)}
          </div>
        );
      }}
    </FakeQuery>
  )
}

const MY_QUERY = gql`
  query {
    things{
      id
      text
    }
  }
`;

export default MyComponent