28

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.

jonathancardoso
  • 9,319
  • 6
  • 49
  • 63
zaq
  • 2,355
  • 8
  • 29
  • 66

1 Answers1

35

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 :)).

nburk
  • 20,293
  • 14
  • 73
  • 116
  • 1
    Thanks for the detailed answer. Could you please tell me what is the major difference between (graphql-server and Graphcool) in terms of speeding up the development cycle. How graphql-server and GraphCool are different from each other. – zaq Apr 11 '17 at 08:32
  • 1
    without knowing too much about `graphql-server`, I think the major difference is that Graphcool provides a full-blown and hosted solution whereas `graphql-server` is a tool that helps you build your own GraphQL server. so depending on what your goals are, one or the other might be better suited :) if you're interested into learning more about how GraphQL works on the server, then `graphql-server` will surely serve you better! if you just want to build an app as fast as possible Graphcool might be more helpful since you don't have to do any server-related work. – nburk Apr 11 '17 at 08:37
  • Thanks. I need to go through the Graphcool docs in depth. At the moment I'm wondering what data do you store on your servers. For e.g, if my application is hosted on Heroku. How does my hosted app is communicating with Graphcool and what data is actually stored on your servers. – zaq Apr 11 '17 at 08:54
  • 1
    I guess it's time to edit this answer. Relay API changes has made it really simple to use. – Dac0d3r Jul 30 '19 at 05:35