apollo-example-arch.js

// Root.js
const Root = () =>
  <Router>
    <Route component={UserScene} path="/users/:userId" />
  </Router>;

export default Root;

// UserDetailsScene.js
const USER_DETAILS_FRAGMENT = gql`
  fragment UserDetailsScene_UserDetails on User {
    ...UserProfile_user
  }
  ${UserProfile.fragments.user}
`;

const SCENE_QUERY = gql`
  query UserSceneQuery($id: ID!) {
    user(id: $userId) {
      ...UserScene_UserDetails
    }
  }
  ${USER_DETAILS_FRAGMENT}
`;

const container = graphql(SCENE_QUERY, {
  options: props => ({
    variables: { id: qs.parse(props.match.params.userId) },
  }),
});

const UserDetailsScene = props =>
  <div>
    <UserProfile user={filter(UserProfile.fragments.user, props.data.user)}
  </div>;

const EnhancedUserDetailsScene = container(UserDetailsScene);

export default EnhancedUserDetailsScene;

// UserProfile.js
const USER_FRAGMENT = gql`
  fragment UserProfile_user on User {
    ...UserAvatar_user
    ...UserBio_user
  }
  ${UserAvatar.fragments.user}
  ${UserBio.fragments.user}
`

const UserProfile = props => 
  <div>
    <UserAvatar user={filter(UserAvatar.fragments.user, props.user)} />
    <UserBio user={filter(UserBio.fragments.user, props.user)} />
  </div>;

UserProfile.fragments = {
  user: USER_FRAGMENT,
};

export default UserProfile;

// UserAvatar.js
const USER_FRAGMENT = gql`
  fragment UserAvatar_user on User {
    profileSrc
  }
`;

const UserAvatar = props => <img src={props.user.profileSrc} />;

UserAvatar.fragments = {
  user: USER_FRAGMENT,
};

export default UserAvatar;

// UserBio.js
const USER_FRAGMENT = gql`
  fragment UserBio_user on User {
    biography
  }
`;

const UserBio = props => <p>{props.user.biography}</p>;

UserBio.fragments = {
  user: USER_FRAGMENT,
};

export default UserBio;