Reuse GraphQL queries

app.js

import React from 'react'
import {graphql, compose} from 'react-apollo'
import gql from 'graphql-tag'

const withUser = graphql(
  gql`
    {
      user {
        id
        firstName
        lastName
      }
    }
  `,
  {
    props: ({ownProps, data}) => ({
      user: data.user,
      loading: ownProps.loading || data.loading,
    }),
  }
)

const withProducts = graphql(
  gql`
    {
      products {
        id
        title
        price
      }
    }
  `,
  {
    props: ({ownProps, data}) => ({
      user: data.user,
      loading: ownProps.loading || data.loading,
    }),
  }
)

@compose(withUser, withProducts)
export default class ProductList extends React.Component {
  render() {
    const {user, products, loading} = this.props
    if (loading) {
      return null
    }
    return (
      <div>
        {products.map(product => <div key={product.id}>{product.title}</div>)}
      </div>
    )
  }
}