Relay vs Redux vs Apollo with GraphQL and React-Native

zaq picture zaq · Apr 9, 2017 · Viewed 10.4k times · Source

I have to start a new (web + native) project (mid-size app) from scratch. Due to the plethora of JS frameworks and implementation out there especially in the last couple of years, I have been having a second doubt on my usual stack.

I have been using react + redux on the front-end along with Node and MongoDB on the backend communicating through REST API's.

For this new project, I have decided to go with React-Native + React Native for Web + Node + PostgreSQL. However, I am wondering which framework I should use to the data fetching and state/store management.

So far, redux worked for me nicely. However, due to the nature of JS evolution. I am a bit skeptical with go the same stack I have been using in the past.

What are the pros and cons if I go with the following stack

React-Native + React-Native-For-Web + Redux + GraphQL + Node + PostgreSQL


React-Native + React-Native-For-Web + Relay + GraphQL + Node + PostgreSQL


React-Native + React-Native-For-Web + Apollo + GraphQL + Node + PostgreSQL

I have read many articles stating the benefits of using each framework, but the amount of content and articles are a bit scary. I understand that there is no right or wrong answer. However, it would be nice to know which aforementioned stack goes nicely together keeping in mind - less learning curve, good documentation, maintainability, fewer workarounds.

Answer

nburk picture nburk · Apr 10, 2017

I think if you're coming from a React + Redux background, then Apollo should be the way to go for you!

Note: If you're a complete newcomer to GraphQL, I recommend you check out How to GraphQL where you'll find tutorials both on Relay and Apollo.

A few pieces of information:

  • Relay is very powerful but also extremely complex and comes with a notable learning curve.
  • Apollo builds on top of Redux though that's not really relevant for you as a developer, because the store is hidden from you. However, similar concepts as in Redux are used e.g. for updating the store with updateQueries.
  • It's also pretty straightfoward to combine the Apollo store with your own Redux store if you want to manage state other than the cached data from the server
  • With Apollo, you can also use realtime subscriptions
  • I would definitely recommend against not using Apollo or Relay and going with only Redux since both frameworks take notable work off your shoulders when it comes to sending queries, mutations, caching and UI updates. However, you might want to take a look at Lokka if you're looking for a more lightweight GraphQL client.

Take a look at this in-depth article comparing Relay and Apollo for more background info.

If you want to learn more about Relay and Apollo, check out the How to GraphQL tutorial website.

By the way, another option for the backend if you don't want to build it yourself would be Graphcool (disclaimer: I work for them :)).