Apollo Fragment Composition

composition.jsx

import { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

/*

  GraphQL Enhancers (resuable and shareable)

*/

// this can be used by multiple parent queries (resuable)
const withPersonData = graphql(gql`fragment Avatar on Person { name, picUrl(size: $size) }`, {
  options: (ownProps) => ({ variables: { size: ownProps.size || 200 }}),
});

// this can be used by multiple parent queries (resuable)
const withAddress = graphql(gql`fragment Address on Person { city, zip, street1 }`);

// this can use multiple fragment enhancers
const withPeople = graphql(gql`query(cursor: ID!, size: Int!) { people(cursor: $cursor) { id, ...Avatar, ...Address } }`, {
  options: (ownProps) => ({ variables: { cursor: ownProps.cursor }}),
  fragmentEnhancers: [withPersonData, withAddress]
})


/*

  Components


*/
const Person = ({ person }) => (
  <li>
    <h1>{person.name}</h1>
    <img src={person.picUrl} />
  </li>
);

Person.PropTypes = {
  person: PropTypes.shape({
    name: PropTypes.string,
    picUrl: PropTypes.string,
  }),
  refetch: PropTypes.func
}

const PersonWithData = withPersonData(Person);

const People = ({ data }) => (
  <ul>
    {data.people && data.people.map(person => (
      <PersonWithData person={person} key={person.id} />
    ))}
  </ul>
);

const PeopleWithData = withPeople(People);

People.PropTypes = {
  data: PropTypes.shape({
    loading: PropTypes.boolean,
    people: PropTypes.array,
    error: PropTypes.object,
    refetch: PropTypes.func,
  })
}