A deep-dive into Relay Modern

Relay was announced at React Conf in February 2015 and was publicly released in August 2015.

Relay, a JavaScript framework for designing data-driven react applications for composable UI empowered by GraphQL for composable data fetching, is the new trend because of its extensibility, easy usability and the best of all, performant.

Relay introduced two concepts:

1. Co-location of data and view

React UIs can be treated as a set of nested components of the application. Every application comprises of the same set of elements which are defined under these components like header, body, list, comments and so on.

Relay combines this approach of React with GraphQL taking the concept of encapsulation one step ahead. Relay framework provides the data to the components as specified by them making the data needs of inner components opaque. This localization of data to the component makes it easier to justify what fields are needed. The components are rendered before the fetching of GraphQL fragments. The components can access the data only which was demanded by them in GraphQL fragments. This is known as data-masking. Each component can see only the field that they asked for, they can’t even see the data requested by their children.

2. Declarative data fetching

In the same manner how React allows developers to express what data should be rendered instead of how the data should be rendered, update and load. By freeing the developer to interact directly with the network, Relay reduces the complexity of the application. The main premise of Relay is that our data fetching is as modular as our UI. Encouraged fine-grained use GraphQL fragments played an important role in this.

Relay vs. Relay Modern

Relay Modern is the redesign of Relay making it easier to use, faster in performance and more extensible by trimming some of the features of original Relay. Relay Modern maintains the best features of Relay – colocation of data and view and declarative data fetching — along with the two embraced concepts:

1. Static Queries

Relay uses the similar approach as that of GraphQL. Initially, it was an additional overhead to build the queries by the concatenation of strings and uploading them on the server. As they keep growing, the GraphQL reaches to the tens of thousands of lines of it making the network traffic heavily populated. To resolve this, the static GraphQL queries which were not updated at the runtime conditions were constructed once and save on the server during the development time. These were later replaced by the identifier sent with some GraphQL variables to acknowledge the server about the query to be executed. This reduced the network traffic tremendously and resulted in much faster performance.

Similarly, the Relay Modern compiler saves the static queries on the server by compiling all the GraphQL snippets for an application together which are fetched and processed at the runtime to produce results with the help of output artifacts.

2. Ahead of time optimization

Relay compiler optimizes the output by optimizing the artifacts required by the Relay runtime to fetch and execute the static queries on the server.

Apart from these two, Relay Modern provides more features:

  1. Simplified Mutation API- Relay Modern specifies which field to be fetched and how to update the cache after the mutation which makes the system more predictable and improves the performance.
  2. Compatibility with Relay- One of the best thing in Relay modern is it’s handy compatibility mode to help you migrate incrementally.
  3. Garbage Collection- A good application is not the one which only manages the CPU usage but also the memory. This is achieved by cache eviction – evict old data from the store in Relay Modern. GraphQL data is removed from the cache if it is no longer needed by the view components. This is useful for the applications in long run otherwise the cache will grow with no limitations.
  4. Performance- It is much smaller as compared to Relay because of the removal of complex features needed for dynamic queries. It eliminates the need to keep track of the information for dynamic query generation reducing the memory overhead providing more memory to make responsive UI.
  5. Flow Type Generation- The flow type for the fragments is generated automatically based on the GraphQL schema which ensures possible null or undefined cases making it less erroneous.
  6. Extensible Core- Its use can be extended to other frameworks apart from React and GraphQL. It has three separate libraries to compile- the compiler, run- runtime and integrate- React/Relay integration layer the application.
  7. Client Schema Extensions- These allow to store additional information with the data fetched and can be rendered as a field fetched from the server.
  8. Less Routing Requirements- The components can be rendered irrespective of the query root providing flexibility to pick routing frameworks.
  9. GraphQL Subscription- These are used to update the store whenever a payload is received.
  10. Injectable Custom Field Handlers- These are used to process the fields which require post-processing on the client especially in case of pagination.
  11. Live Queries- With the help of polling, it provides support for GraphQL Live Queries.
  12. Smaller Bundle Size- The runtime bundle is reduced to 20% in comparison to Relay.

A great technology to build React applications on a large scale is Relay Modern. Even one can build his own integrations by using it with other view technologies such as Angular, Ember, Vue.js etc. The only drawback is the unavailability of documentation making it difficult to use.


I am a technology freak with passion for UI technology.

Leave a Reply