export const Gists = props =>
  <div>
    {
      props.viewer.gists &&
      props.viewer.gists.map(x => <p>{x.description}</p>)
    }
  </div>

export const GistsWithGraphQL = compose(
  withGraphQL(variables => Fragment`fragment gists on Gist {
  description
}`)
)(Gists)


export const Gist = props =>
  <h1>{props.viewer.gist.name}</h1>

export const GistWithGraphQL = compose(
  withGraphQL(variables => Fragment`fragment gist on Gist {
  name
}`)
)(Gist)


const GitHubGists = props =>
  <div>
    <GistsWithGraphQL />
    <GistWithGraphQL />
  </div>

export const GitHubGistsWithGraphQL = compose(
  withGraphQL(({gistName}) =>  Query`{
  viewer {
    gists(first: 10) { nodes ${GistsWithGraphQL} }
    gist(name: ${gistName}) ${GistWithGraphQL}
  }
}`)
)(Gist)


render(<GitHubGistsWithGraphQL gistName={'cca8c44d3'}/>, document.getElementById('root'))