Skip to content

Instantly share code, notes, and snippets.

@devongovett
Created July 7, 2018 06:03
Show Gist options
  • Save devongovett/099e1421038dec382df8be982393dec3 to your computer and use it in GitHub Desktop.
Save devongovett/099e1421038dec382df8be982393dec3 to your computer and use it in GitHub Desktop.
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} />;
}} />
);
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;
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;
fragment movieFields on Movie {
movie {
test {
title
chimp {
field
jank
}
}
foo
}
}
fragment movieListFields on MovieList {
movieList {
...movieFields
}
}
{
query {
...movieListFields
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment