Proposed Query component use with fragments

1-pages-order.js

import React from "react"
import {gql} from "react-apollo"

import OrderRow, {LoadingOrderRow} from "../components/OrderRow"
import SingleOrder from "../components/SingleOrder"
import ErrorMessage from "../components/ErrorMessage"
import Query from "../components/Query"

export default const Page => ({query}) =>
  query.id 
    ? <Show id={query.id} />
    : <List />

const List = ({}) => 
  <div>
    <Query gql={ListOrderQuery}>{({ListOrder, error, loading, refetch}) => 
      loading
        : Array.from(5).map(i => <LoadingOrderRow />)
        ? error 
            ? <ErrorMessage error={error} />
            : ListOrder.orders.map(order => <OrderRow order={order}/>)
    }</Query>
  </div>

const ListOrderQuery = gql`
  query ListOrder {
    orders {
      ...OrderRow
    }
  }
  ${OrderRow.fragments.OrderRow}
`

const Show = ({id}) =>
  <div>
    <Query gql={ShowOrderQuery} variables={{id}} wait>{({ShowOrder, error, refetch}) => 
      error 
        ? <ErrorMessage error={error} />
        : <SingleOrder order={ShowOrder.order} />
    }</Query>
  </div>

const ShowOrderQuery = gql`
  query ShowOrder($id: ID!) {
    order {
      ...SingleOrder
    }
  }
  ${SingleOrder.fragments.SingleOrder}
`

2-components-OrderRecord.js

import React from "react"
import {gql} from "react-apollo"

export const OrderRecordRow = ({record}) => 
  <li>{record.title}</li>

OrderRecordRow.fragments = {
  OrderRecordRow: gql`
    fragment OrderRecordRow on OrderRecord {
      title
    }
  `
}

2-components-OrderRow.js

import React from "react"
import {gql} from "react-apollo"

export default const OrderRow = ({order}) => 
  <span>{order.name}</span>

OrderRow.fragments = {
  OrderRow: gql`
    fragment OrderRow on Order {
      id
      name
    }
  `
}

2-components-SingleOrder.js

import React from "react"
import {gql} from "react-apollo"

import {OrderRecordRow} from "./OrderRecord"

export default const SingleOrder = ({order}) =>
  <div id={order.id}>
    <h1>{order.name}</h1>
    <ol>
      {order.records.map(rec => <OrderRecordRow record={rec} />)}
    </ol>
  </div>

SingleOrder.fragments = {
  SingleOrder: gql`
    fragment SingleOrder on Order {
      id
      name
      records {
        ...OrderRecordRow
      }
    }
    ${OrderRecordRow.fragments.OrderRecordRow}
  `
}

Using these components in storybooks should be possible by wrapping the stories in a MockedProvider 🙌