How do GraphQL & Redux work together?

janus picture janus · Jan 29, 2018 · Viewed 8.9k times · Source

I am wondering about the relationship between the two. I am quite confused since I see them both as ways to manage state almost, and there seems to be an overlap, so I am seeking a conceptual distinction I can apply in order to find out what information to keep where and how to make them work together. Any advice?

Answer

Robin Wieruch picture Robin Wieruch · Apr 22, 2018

You have to distinguish between view state (e.g. search field, popup, toggle) and data state (e.g. remote API). Whereas Apollo is mainly used for data state, Redux/MobX/React's Local State are used for view state when used in combination with Apollo Client. If not used with Apollo Client, these solutions can be used for the remote data state too.

  • 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.

Maybe this article clarifies some things more in-depth: Combining Redux and Apollo.

Opinion: I feel like in the time of React Hooks, Redux and MobX are getting less relevant. Over here, you can find an in-depth article about all the state management options in React.