Basic example using QueryRenderer from RelayJS.

ManageOrdersRelay.js

import React from 'react';
import PropTypes from 'prop-types';
import {graphql, QueryRenderer} from 'react-relay';

import environment from '@/environment';
import PageBar from '@/components/PageBar';
import Loading from '@/components/Loading';

const manageOrdersQuery = graphql`
    query ManageOrdersRelay {
      orders(first: 10){
        edges {
          node {
            id
            creationTime
            dueDate
            poNumber
            status
            lineItems {
              edges {
                node {
                  shortDescription
                  quantity
                  unitPrice
                }
              }
            }
          }
        }
      }
    }
`;

const ManageOrders = ({routes}) => (
    <div className="page-content">
        <PageBar routes={routes} />
        <h1 className="page-title">Manage Orders</h1>
        <QueryRenderer
            environment={environment}
            query={manageOrdersQuery}
            render={({error, props}) => {
                if (error) {
                    return <div><h1>Error!</h1><br />{error}</div>;
                }

                if (props) {
                    return (
                        <div>
                            <ul>
                                {props.orders.map((order) => (
                                    <li>{order.id}</li>
                                ))}
                            </ul>
                        </div>
                    );
                }

                return <div><Loading /></div>;
            }}
        />
    </div>
);

ManageOrders.propTypes = {
    routes: PageBar.propTypes.routes,
};

export default ManageOrders;