Last updated

Learn Relay

A comprehensive introduction to Relay


Get a broad overview of the goals and prerequisites of this introduction to Relay and get to know the Pokedex app we will build together.

Introduction to Relay

Learn the basics of Relay and set up your environment for the following chapters. As Relay is a GraphQL client, this introduction focuses on the client side. You can use the included GraphQL backend to get the most out of this introduction and follow along in several practical steps that will lead to a fully functional Pokedex app!


Queries are a central part of Relay as they are used to fetch data from the GraphQL server. Whenever we want to declare a data dependency in one of our React components, we have to wrap it with a container. Usually, you are building queries by combining fragments and using query variables to add additional flexibility. Combine these parts and get familiar with the Pokedex app by preparing things for the following chapters.


The terminology of Relay can be quite overwhelming in the beginning. That's why we take a closer look at connections in this chapter. We will learn what nodes and edges are, and how we can use them to traverse our data graph. We will get in touch with the powerful concept of cursors and pagination and instill some life in the Pokedex app by applying everything we learned so far.


Routes are normal objects that declare root queries. Relay will aggregate the defined queries with fragments by using Relay.Renderer and send them to a remote server to fetch data.


Learn how to delete or update your existing pokemons or even add new ones with Mutations! Mutations are the counterpart to queries, as they are used to modify or delete data. All mutations have to be dispatched using the Relay.Store. Get to know the different Mutation Types and use Optimistic Updates to provide an optimistic UI.