Apollo/Fraql fragments. just an example, not syntactically correct

List.jsx

import gql from 'fraql'
import { ListRow } from './ListRow';

// this is the whole list
export const List = ({ users }) => (
  <ul>
    {users.map(user => <ListRow user={user} />)}
  </ul>
)

// define list data reqs
List.fragments = {
  users: gql`
    fragment _ on Project {
      users(first: 10) { 
        id
        ${ListRow.fragments.user}
      }
    }`
};

ListRow.jsx

import gql from 'fraql'

// this is a single item in a list
export const ListRow = ({ user }) => (
  <li>{user.name} {user.email}</li>
)

// define row data reqs
ListRow.fragments = {
  user: gql`
    fragment _ on User {
       name
       email
    }
  `
};

Page.jsx

import gql from 'fraql'
import { Query } from 'react-apollo;
import { List } from './List';

// this is the query that fetches a project an its users 
// using the List's data reqs
const query = gql`
  query ProjectUsers($projectId: ID!) {
    project(id: $projectId) {
      id
      title
      ${List.fragments.users}
    }
  }
`;
      
// this is a page container that executes the query and 
// passes the data down to the list component
export const Page = ({ projectId }) => (
  <Query query={query} variables={{ projectId }}>
    {({ data }) => (
      <div>
        <h1>{data.project.title}</h1>
        <List users={data.project.users} />
      </div>
    )}
  </Query>
);