UserBlock.tsx

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import * as React from 'react';
import UserBlockComponent from '../components/UserBlock';

const query = gql`
  query me {
    me { id name }
  }
`;

class UserBlock extends React.Component {
  render() {
    if (this.props.loading) {
      return (<LoadingIndicator/>):
    } else if (props.errors) {
      return (<ErrorIndicator errors={this.props.errors}/>);
    } else {
      return (<UserBlockComponent name={this.props.name}/>);
    }
  }
}

export default graphql(query, {
  options: { 
    fetchPolicy: 'cache-and-network'
  },
  props: props => ({
    loading: props.loading,
    errors: props.errors,
    name: props.data.me.name || 'undefined'
  })
})(UserBlock);