React, Apollo and GraphQL

When developing a website that interacts with a REST API, a common path is to use a network management library together with Redux to manage state. This means writing reducers, actions, and state management for the different stages when communicating with the API. With good design, this can be generalized using HOCs, or some other structure to avoid repeating code.

The Apollo stack aims to simplify development of applications that consume an API.

GraphQL

For the backend part of the stack, it uses GraphQL instead of REST. GraphQL is a query language created by Facebook in 2012 for describing the capabilities and requirements of data models for client‐server applications. It tackles several of REST’s shortcomings, providing an easy way of defining data structures and queries so that development and usage of the API is easy and flexible. Some people are even calling it REST 2.0.

There is a whole ecosystem around GraphQL. Some notable examples of tools are:

• GraphCool provides a way to use GraphQL like a backend-as-a-service.
• Plugins exists to validate queries using ESLint, avoiding typos and warning the developer if something changed in the backend.
• Some are pointing to GraphiQL (an interactive tool for exploring and testing GraphQL backends) as the killer app for GraphQL.

ApolloApollo is a GraphQL client for React, React Native, Angular, Swift and Java. When using it, you get options for configuring caching, mutations, optimistic UI, subscriptions, pagination, server-side rendering, prefetching, and more.

It can be incrementally adopted, meaning that it can be implemented for small components, coexisting with non-apollo components. Apollo uses Redux under the hood, so it can plug into existing Redux applications and all Redux development tools will work with Apollo’s queries.

All code related to API interactions gets managed by Apollo, allowing the developer to just define what data a component needs.

Besides the official documentation, these are some useful resources:

• Full-stack React + GraphQL Tutorial: an excellent 6-part tutorial for implementing the full Apollo stack.
• How do I GraphQL?: Top 3 things to know coming from REST.
• GraphQL explained: How GraphQL turns a query into a response.
• Simplify your React components with Apollo and Recompose: Keeping your components pure with HoCs