Reactql - react-redux with graphql

842 Views Asked by At

I would like to start building my new app with reactql. I am really into graphql and MERN stack. However, I started learning redux pattern quite recently. My main pain is - how to create actions that fetch data with graphql query (I use mostly apollo for it). I mean - I find examples with REST pattern but I have no idea and cannot find any example of simple reac-redux app getting data with graphql query.

I would really appreciate any examples/help/clues.

2

There are 2 best solutions below

1
On BEST ANSWER

Check out the ReactQL auth example repo.

It has showcases many of the features you're looking for, including 'posting' data with GraphQL mutations, and retrieving data with a GraphQL query, in the context of managing users and sessions.

0
On

Don't make the mistake to mixup too many technologies in an early stage of your application. Maybe the ReactQL stack offers too many libraries?

The question is not how to combine Redux and Apollo Client to make remote API request, but how to separate them for their specific responsibilities. When you are using Apollo Client in your client application, because you have a GraphQL backend, then use Apollo for your remote state. Then Redux (or MobX/React's Local State) is only used for the view state (e.g. popup toggle, search field). If you are not using Apollo Client, Redux (with redux-saga or redux-thunk) can be used for the remote data instead. Otherwise, use the Query and Mutation components provided by react-apollo to connect your remote data to your React layer.

  • If your application is purely remote data driven and uses a GraphQL backend, Apollo Client can be sufficient for your application.

  • If you have a few view states in your application, mix in React's local state management.

  • If you have several to a lot of view states, use Redux or MobX for your view state or try out apollo-link-state.