GraphQL with React - Apollo vs Relay overview

After looking at how GraphQL can be used with Vue and Angular it’s obviously time to look at how it works with React. Especially since they share the same background, both having started out at Facebook, GraphQL even had its public debut at the 2015 ReactJS conference. With ties reaching that far back it’s logical to assume using both GraphQL and React together has to have some benefits right?

React & GraphQL

Well sure, as mentioned previously GraphQL basically acts as a super efficient intermediary and helps query data received from various sources. Currently React is most often used in apps for creating a user friendly UI. While most devs use REST APIs to exchange data, GraphQL makes it much easier to retrieve it from REST resources into the right shape for our UI. If you’re interested in efficiency, performance and not wasting bandwidth it’s a prudent solution, suffice to say Facebook had good reason to use it on their websites. Another benefit of coming out of the same place React did, is that it became popular in its large and very productive community, which has over the years created tons of additional third party libraries and tools for you to use.

Relay

The last two times we focused on Apollo as the connector between the framework (ie. Vue and Angular) and the query language, GraphQL. Well this time since we started out talking about the common Facebook background it’s only fair to first look at their own solution namely Relay. It was introduced during that same Reactjs 2015 conference and is simply put a JavaScript client for fetching and managing GraphQL data. The goal is delivering instant UI-response interactions and keeping your app sturdy and performant as it increases in size and complexity. That sounds really simple, but it actually has a large impact on its approach:

• scalability: Relay’s approach is supporting scaling instead of flexibility. It will continuously support your application as it grows while keeping data fetches to a minimum once you get past the back-end setup. The fact it worked at something the scale of Facebook should be pretty reassuring.
• highly opinionated: Relay follows Facebook’s approach, it wants you to follow the one correct way to use it. Its very opinionated structure and naming convention can be really useful when it comes to using components, but it also means that you’ll need to learn exactly how to use it and will have less freedom and flexibility.
• optimization: The Relay compiler makes the structural approach actually worth it as it analyzes any GraphQL inside your code during build time and validates, transforms and optimizes it for runtime. This saves you a lot of time searching for and fixing errors and bad code and makes the whole process a lot smoother.

Apollo

Apollo takes the opposite approach and focuses on providing freedom and flexibility. It’s framework agnostic, works with any schema and is easier to get into. It can handle GraphQL both on the client and server side and takes full use of third party libraries and tools. Let’s highlight the benefits of that approach:

• community support: Apollo has great documentation and is regularly updated, but its robust community is probably its strongest point. Because of the emphasis on flexibility, freedom and open source it has tons of third party solutions to almost any problem you can think of.
• flexibility: Apollo is framework agnostic and works not only with React, Vue and Angular but also has libraries that can connect it to Node, Express, Koa, and Hapi. If you’re looking to be versatile it can serve as a quick jumping point to a number of other frameworks and libraries.

Relay vs Apollo

As you can see the basic difference is the approach: structure or freedom. One isn’t better than the other, that’s why both are so popular and widely used, it comes down to what you need. Apollo’s focus is to provide ease of use and flexibility, if you want to get to work on your app as fast as possible it’s the way to go. It will also let you freely choose how you want to work on your project so if you value that it’s also the way to go. On the other hand it might require some additional work to make sure everything works as intended. Relay’s focus is to provide you with a scaling, structured solution that will take more time to get into, but will also do more work under the hood, without you needing to check if everything works all the time. If you’re working with a team it might be the better solution, it does have a steeper learning curve, but once you get going it will be a lot easier to make sure everyone is on the same page at all times. As always the correct choice comes down to recognizing what will fit you better, which I hope this piece has helped with at least a little bit.