App.js

const pageQuery = createQuery(); // create a top-level query
const App = () => (
  // rendering MovieList automatically composes `MovieList.fragment` into the query.
  <Connect
    query={query(pageQuery)}
    children={({ loaded, data }) => {
      let result = pageQuery(data);
      return <MovieList data={result.movieList} />;
    }} />
);

Movie.js

const fragment = createFragment('Movie');
const Movie = ({data}) => {
  let result = fragment(data);
  let movie = result.movie;
  return (
    <div className="movie">
      {loaded === false ? (
        <p>Loading</p>
      ) : (
        <div>
          <h2>{movie.test.title}</h2>
          <p>{movie.test.chimp.field}</p>
          <p>{movie.test.chimp.jank}</p>
          <p>{movie.test.chimp.doop}</p>
          <p>{movie.foo}</p>
          <button onClick={onClose}>Close</button>
        </div>
      )}
    </div>
  );
}

Movie.fragment = fragment;

MovieList.js

const fragment = createFragment('MovieList'); // specify the graphql fragment type
const MovieList = ({data}) => {
  let result = fragment(data);
  
  // render the Movie component for each item in the movieList.
  // this automatically composes `Movie.fragment`
  // would have to have special support for array methods like `.map` so you know
  // `movie` is related to `movieList`.
  return (
    <div className="movie-list">
      {result.movieList.map(movie => <Movie data={movie} />)}
    </div>
  )
};

MovieList.fragment = fragment;

query.graphql

fragment movieFields on Movie {
  movie {
    test {
      title
      chimp {
        field
        jank
      }
    }
    foo
  }
}

fragment movieListFields on MovieList {
  movieList {
    ...movieFields
  }
}

{
  query {
    ...movieListFields
  }
}