Relay2 is almost here and it looks awesome

Spoiler Alert: it’s called Relay Modern

At Q̶u̶r̶i̶ Trax (Quri was acquired by Trax in January 2018) we have been users of GraphQL in production for more than a year now. We started by just replacing our Redux / REST “api calls” with some manually constructed GraphQL queries, soon enough we felt the need to adopt a GraphQL Client.

We started experimenting and ultimately adopted Relay for an internal project. More recently the team also started to use Apollo client. Disclaimer: I am personally biased towards Relay because, well when I started looking at clients, Apollo wasn’t out yet. That said, the main drawbacks against Relay have been:

• The lack of community engagement: Relay is a Facebook-driven project; Facebook’s priorities might not be the ones of the greater GraphQL community.
• The mutations API can be hard to understand: you need to spend time in the documentation and actually using it to understand what a RANGE_ADD actually does. To be fair, the mutation API actually covers most —if not all— of the use cases one would need. However some argue that it lacks a more friendly imperative interface. It being very generic made it sometimes hard to understand how to just “append and element to a connection” (hint: just use RANGE_ADD).
• That codebase was unapproachable to the average developer.
• Other random confusing parts: Query Routes aren’t actually routes as most React developer would think, mutation can only take a single input: argument, root connections are not a thing unless using the viewer trick.

I have personally been on the watch for the most recent updates since my interest got piqued at the Silicon Valley ReactJS Meetup where a technical overview was first presented and then a few weeks later when the same Greg Hurell gave a Deep Dive on the internals.

Since then the FB team would often talk about the future of Relay —and the community picked up concepts: subscriptions, persisted queries — however never a release date was announced. As a matter of fact, the React / Relay teams are notoriously known for “shipping to OSS only projects that have proven to be working in production”.

Nonetheless, I’ve been checking Relay’s recent commit list and the meeting notes for quite a few months now, and here we are, after a lot of prep work, plenty of flow types updates, tests tweaking, finally the big “sync with OSS” diff landed!

Not only it’s exciting because this means the long announced Relay2 — call it Relay Modern now — should be coming at least in alpha soon but we can also get a better idea of what this rewrite involves. The team promised that this new version would be more friendly to the community and they delivered.

Indeed, Relay Modern is now split into a few loosely coupled packages. Each package comes with an ARCHITECTURE.md that explains in details of the role and use of each package — this is mostly for the curious and future API / plugins developer who would build on the ecosystem.

• Relay Compiler: The compiler is a set of modules designed to extract GraphQL documents from across a codebase, transform/optimize them, and generate build artifacts. Examples of common types of artifacts include optimized GraphQL to persist to your server, runtime representations of the queries for use with GraphQL clients such as the Relay runtime, or generated source code for use with GraphQL frameworks for compiled languages (Java/Swift/etc). TLDR; relay-compiler parses your code, reads the GraphQL queries or fragments and spits out GraphQL documents, persisted queries, other language generated code (like Swift types or Flow definitions)
• Relay Runtime: The Relay runtime is a full-featured GraphQL client that is designed for high performance even on low-end mobile devices and is capable of scaling to large, complex apps. The runtime API is not intended to be used directly in product code, but rather to provide a foundation for building higher-level product APIs such as React/Relay. TLDR; this is the new Relay Core, it contains the main store and caching mechanisms.
• React Relay: a la react-redux, this package contains the React bindings. It being independent removes some of the coupling to React and will potentially allow other view libraries to use Relay. It has 3 sub-folders: classic contains the current implementation, compact will provide a compatibility API that will allow users of Relay to incrementally transition their implementations and finally modern which contains the new bindings.

For more information about Relay Modern, check out the [meta] GitHub issue.

If you are eager to work with an awesome team on projects that use GraphQL, cutting-edge front-end tech, reach out we are hiring!