How do GraphQL & Redux work together?

Question

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?

Solution 1

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.

Solution 2

GraphQL is just a way to tell an endpoint "this is the data I want". Redux is the way to store that data. Conceptually, they're entirely separate.

As for integrating them, though, we've had success using Apollo, (before they removed Redux, and rolled their own store). Take a look at this article to start you off, and then see where Apollo has gone from there,

Comments

[Ionut Achim]

There's also graphql-normalizr which you can use to normalize graphql response data and then persist it to the store.