GraphQL + React, Apollo, GraphCool

I completed the tutorial How to GraphQL, it’s a great tutorial to understand GraphQL. You get to build a Hackernews clone with React, Apollo (caching GraphQL client), GraphQL and GraphCool (GraphQL backend). Choose a different stack if you’d like, there’s options in the tutorial.

This is the Hackernews app I built using the tutorial. I’m so glad that GraphQL exists, you don’t need ten different HTTP endpoints for every data retrieval or manipulation, just one does the job. I can’t believe I haven’t been using this, I’m so happy with it.

A simple illustration from the tutorial ( that demonstrates how it’s simpler (and better) than REST API..

Data Fetching with REST API

Data Fetching with GraphQL

React Key Concepts

I was given this set of Qs by Emile and found them really useful to understand basic concepts in React. Note that the questions about High Order Component and the component tree lead up to GraphQL.

What’s a component and why do we need it?

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

The purpose of state and props.

There are two types of data that control a component: props and state. Props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.

Props and state are related. The state of one component will often become the props of a child component. Props are passed to the child within the render method of the parent as the second argument to React.createElement() or, if you’re using JSX, the more familiar tag attributes.

Continue reading →