A JavaScript framework for building data-driven React applications


Never again communicate with your data store using an imperative API. Simply declare your data requirements using GraphQL and let Relay figure out how and when to fetch your data.


Queries live next to the views that rely on them, so you can easily reason about your app. Relay aggregates queries into efficient network requests to fetch only what you need.


Relay lets you mutate data on the client and server using GraphQL mutations, and offers automatic data consistency, optimistic updates, and error handling.

Get StartedDownload

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.

Get StartedDownload