An example of using Query/Mutation components with Apollo and GraphQL
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Failed to load latest commit information.
.flowconfig adding flow Jun 6, 2017
.gitignore created react app Jun 6, 2017
project.graphcool Get a simple Apollo example wired up Jun 6, 2017

Demo for creating Query/Mutation components via Apollo and GraphQL

This is a simple demo which shows how to create a good separation of concerns between presentation components and query components when using Apollo and GraphQL. This demo is intended to accompany a blog post wich is currently TBD.

You can play around with it and enter a few zip codes. The database only really has a few right now (48103, 48104, 48105), but you'll get the idea.

For the GraphQL backend, I'm using Graph.Cool. It is a REALLY easy way to start experimenting with GraphQL on the front-end without having to learn how to implement a GraphQL server.

What is a Query Component?

A query component is React component which handls all of the query work for you. It provides a nice separation between your query logic and your presentation component while maintaining a reasonable amount of co-location. The src/SchoolsQuery.js file is an example of this technique and it is easy to compose queries with presentation.

<SchoolsQuery postalCode={postalCode}>
    {(schools, {isLoading, isEmpty, isError}) => {
        if (isLoading) {
            return <div>Loading</div>;

        if (isEmpty) {
            return <div>No items match your postal code</div>;

        if (isError) {
            return <div>There was an error processing your search</div>;

        return <ul>{
                <li key={}>{school.display}</li>

Note that this technique uses the "Functions as Children" approach so that the query component can pass data and properties down to the child via a function.

Mutation Components

The same technique can be used for mutations. I don't have it in the demo because I don't want to allow anyone to add to the database, but you can see how it works in src/NewSchoolMutation.js. Composing with presentation is very similar:

    {onNewSchool => <button

Create React App

This project was bootstrapped with Create React App. I've added a few extra things to it, like Flow and Flow to PropTypes.

Running the demo app

Clone the repo, then

npm install

npm start