FirmRequestList.js

import React from 'react';
import { connect } from 'react-apollo';
import gql from 'graphql-tag';
import RLHeader from './RLHeader.jsx';
import TabBar from './TabBar.jsx';
import FirmRLTabContents from './FirmRLTabContents.jsx';
import ItemList from './ItemList.jsx';

function FirmRequestList(props) {
  if(props.data.loading) {
    return <h3>loading...</h3>
  } else if(props.data.errors) {
    return <p>{JSON.stringify(props.data.errors)}</p>
  } else {
    return (
      <div>
        <RLHeader data={props.data}/>
        <TabBar routeParams={props.routeParams}/>
        <FirmRLTabContents routeParams={props.routeParams}/>
        <ItemList data={props.data}/>
      </div>
    );
  }

}

const query = gql`
  query getRequestList($id:ID!){
    requestList(id:$id) {
      id,
      name,
      dateDue,
      hideUntil,
      hideDateDue,
      status,
      engagement {
        id,
        name,
        client {
          id,
          name
        }
      },
      items {
        id,
        requestText,
        status,
        order
      }
    }
  }
`;

const mapQueriesToProps = ({ ownProps, state }) => ({
  data: {
    query,
    variables: {
      id: ownProps.routeParams.id
    }
  }
});

export default connect({ mapQueriesToProps })(FirmRequestList);

Item.js

import React from 'react';

function Item(props) {
  const data = props.data;

  return (
    <div>
      {JSON.stringify(data)}   //This works fine and prints an object with a requestText property
      {data.requestText}       //This errors out
      <hr />
    </div>
  );
}

export default Item;

ItemList.js

import React from 'react';
import Item from './Item.jsx';

function ItemList(props) {
  const items = props.data.requestList.items;
  return (
    <div>
      <hr />
      {items.map((item) => (
        <Item key={item.id} data={item} />
      ))}
    </div>
  );
}

export default ItemList;