Help clarify GitHunt Apollo sample app

apollo
1

Apollo looks amazing. But there’s few examples out there for Apollo and GraphQL in general.

The GitHunt app is great, too, but the code is dense. It makes GraphQL seem a little complicated.

This app is impressive and it apparently requires 3 servers running at once: the API server, the client (SSR?) server, and the webpack (dev only?) server. Running the app I’m not sure what part of the app is SSR and what part is rendered on the client. Is the initial page get rendered on the server, and subsequent changes rendered on the client? Or is only the skeleton page (Html.js) rendered on the server?

Now I’m trying to understand the feed page. The graphql() call is using the gql query and then is passed another object that has two functions, options and props, it looks like:

  { 
    options(props) { return{...}}, 
    props({ data: { loading, feed, currentUser, fetchMore } }) { return {...}}
  }

This is the source file I’m referring to: https://github.com/apollostack/GitHunt-React/blob/master/ui/Feed.js

I sort of understand options, but I get lost with the next “props” and “data”. I don’t know where “loading” comes from. Is “loading” included as part of GraphQL/Apollo? I guess props is optional, but is included to specify the fetchMore function?

Other examples I’ve seen floating around look simpler. So it would be nice if this code were simpler!

2

This is meant to represent a “real” app - we’re also working on a more “hello world” app to go along with it, but that’s not what GitHunt is.

I would suggest reading the docs before you jump into an example app.

For example, this is where you can learn about the props option: http://dev.apollodata.com/react/queries.html#graphql-props

3

Cool thanks, that documentation is helpful, I should have dug deeper into it. I’ve just been digging through so many different GraphQL examples and projects. This is powerful example app. Thanks again for creating Apollo!

1 Like