9.6: GraphQL / React-Apollo



GraphQL is a newer way for front-end JavaScript to get data from the back-end server. GraphQL can make it easy for front-end developers to fetch data from the back-end that would normally require the equivalent of many sets of JOIN queries or multiple different AJAX requests.
According to wikipedia, GraphQL is: "an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data". Let's unpack this statement. We can say that there are effectively two parts to what GraphQL is responsible for.
  1. 1.
    Data query and manipulation language for APIs
    GraphQL describes a way that you can fetch a range of information from a database using a single HTTP request. The origins of GraphQL are at Facebook, where the front-end team needed a way to formulate complex queries to display things like the Facebook newsfeed.
  2. 2.
    Runtime for fulfilling queries with existing data
    GraphQL libraries work somewhat like an ORM, constructing SELECT queries to be run across multiple tables of the database.


Apollo is a front-end data control layer that deeply integrates with React as a Store / Context provider / caching layer. It is built to be used with a GraphQL back-end.
Together these two technologies form the basis of an easy to use back-end data layer for a modern React app. GraphQL makes it easy to state what data the app should fetch across multiple tables, and the Apollo library makes it easy to control that data and get it into the state of the React app, update it when necessary and cache it so that it doesn't need to be requested again.
The other major competitor to Apollo is the heavier-duty Facebook sponsored library Relay. These data layer libraries are slowly replacing the Store / Redux data layers in modern apps that can use GraphQL as the back-end.

GraphQL - Postgres with Express.js

Apollo-React with GraphQL

Apollo can be used as a front-end data layer with multiple front-end libraries. The React specific NPM component is called apollo-react.