components--user-card--fragment.gql

fragment UserCardFragment on User {
  id
  url
  avatarUrl
  email
}

components--user-card--index.js

var UserCard;

export default UserCard = class UserCard extends React.Component {
  render() {
    return <>
          <a href={props.user.url}>
            <img src={props.user.avatarUrl} />
            <span>{props.user.email}</span>
          </a>
        </>;
  }

};

screens--profile--index.js

var Profile;

// import the "dumb" component
import UserCard from '/components/user-card';

// define the screen / layout
export default Profile = class Profile extends React.Component {
  render() {
    return <>
          <h1>{props.user.name}'s Profile</h1>
          <UserCard user={props.user} />
        </>;
  }

};

screens--profile--user.gql

#import "/components/user-card/fragment.gql"

query user($id: ID!) {
  user(id: $id) {
    id
    name
    ...UserCardFragment
  }
}