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?
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.
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:
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:
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.
The GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster thanks to dozens of built-in micro features. Its graphical interface will also fix communication within your product team. Visualization is the key!