Relay - A JavaScript framework for building data-driven React applications

Declarative

Declare the data your components need with GraphQL, Relay determines how and when to fetch your data.

Colocation

GraphQL is written next to the views that rely on them. Relay aggregates queries into efficient network requests.

Mutations

Write GraphQL mutations and Relay offers automatic data consistency, optimistic updates, and error handling.

New

Relay Modern

Relay Modern is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.

Incrementally convert existing Relay apps, or start a new one with Relay Modern.

Try Relay Modern

A simple list

Relay lets each view declare its own data requirements in the form of a GraphQL query fragment. Here, each tea in this list of teas declares that it needs a name and a steepingTime to be able to render. Just like we compose React components to build an app, we compose query fragments together to build a single query at the root of the app.

A simple parameterization

Relay query fragments can be parameterized using variables in GraphQL calls. This enables mechanics like pagination, filtering, sorting, and more.

A simple mutation

Use Relay to change the world through the use of GraphQL mutations. Given a set of query fragments, a mutation, a query that represents all parts of the world that might change as a result of this mutation (the ‘fat query’), and a set of behaviors to exhibit when the server responds (the ‘query configs’), Relay will ensure that all of the data necessary to perform the mutation has been fetched, and that your client-side data stays in sync with the server after the mutation.