Relay modern - Should I care About New Facebook Library

A lot of love was given to React developers, which is not a surprise, if we consider the fact that this view library has been growing in popularity ever since it was released in May 2013. React has received a new library for creating visual reality experiences, called React VR and a massive update to the reconciliation algorithm with the release of React Fiber. It has also received a new, refined version of its GraphQL client library Relay. The new version of Relay, called Relay Modern, introduces a variety of changes that are worth discussing.

Relay Is Not a React-Only Library Anymore

Relay Modern splits what used to be called Relay into three different libraries:
relay-compiler,
relay-runtime,
react-relay

This change alone is really big, since it makes the Relay framework agnostic to the GraphQL client, as opposed to what it used to be. Let’s take a look at the last library from the list, react-relay. This library is now used for the integration with React applications. Since react-relay became a stand-alone library, Relay might become usable with other view libraries in the future.

It is much, much faster

Here are some numbers: Facebook did the math and concluded that the time needed to interact with their app on Android “improved by an average of 900 ms” after fully converting to Relay Modern.

New Relay’s bundle size got reduced to about 20 percent of what it used to be.

On top of five-times smaller bundle size, applications using Relay Modern will get query and mutation results significantly faster. An example of such optimisation is extracting queries and mutations during the build time and assigning IDs to them. This means that the client no longer has to send long GraphQL query strings that have to be processed on the server later on. Instead, a simple query identifier is sent and the server immediately knows which query to respond to. As Lee Byron wrote: “The Relay compiler extracts collocated GraphQL snippets from across an app, constructs the necessary queries, saves them on the server ahead of time, and outputs artefacts that the Relay runtime uses to fetch those queries and process their results at runtime.”

Note: Constructing a set of predefined queries in the build phase has many benefits outside of the performance, and if you are interested in this topic, here is a great article written by one of the Meteor and Apollo client creators, Sashko Stubailo.

Relay Modern is easier to learn

One of the most important changes in this matter is an amazing update to mutations API. This allows performing mutations in a simple and easily explicable way, similar to how “normal” GraphQL mutations are performed. Just take a look at the example. If you open the link, you will see another amazing feature, which is updating the client optimistically, based on expected new value.

React developers now have fewer abstractions to worry about. Routing is now optional, and allows queries to be performed anywhere in the routing tree. It also makes using libraries such as react-router easier. You can now render the Relay.QueryRenderer component anywhere in the routing tree. This component is just like a regular React component, and it can be rendered inside other React components.

There is more

Relay Modern now supports GraphQL Subscriptions, Flow Type generation from the compiler and, most interestingly, Client Schema Extensions, which could be used for storing client-related data. Client Schema Extensions could potentially help solve problems previously solved by client-state libraries such as Redux.

You can use its features right now

Relay Modern can be used next to Relay thanks to the compat mode, allowing updates to be performed one at a time. This will allow using an API that is faster and easier to reason about, with some Relay restrictions being removed even before migrating completely. The list of features supported in the compat mode can be found here.

Wrapping up

The GraphQL community is evolving rapidly. One important aspect of this evolution is that GraphQL users are working together on developing the industry’s best tools and practices as fast as possible. Relay Modern improved the framework by a great margin, and this does not only affect Relay users. Topics such as handling predefined queries, mutations or subscriptions are important for the entire GraphQL community, and even non-Relay users will undoubtedly benefit from the improvements in those areas.