Apollo Client 3.0 or Redux for the local state management?

user_1528836 0
Viewed 2193

I am using Apollo Client 3.0 to fetch data from graphql server, but I can't decide what to use for local state management (Redux or Apollo Client 3.0).

I think Redux force me to write more code, but in a predictable and cleaner way which it's good. Also adding Redux to the app means I will have mix of 2 state management libraries.

Apollo Client 3.0 has Reactive Variables, but for large application I think it will become a mess! Also I can use queries and mutations with @client directive, but this could be a little bit confusing.

What do you recommend me ? What should I use ? Can you provide me some good examples ?

Thanks!

apollo-client react-apollo redux reactjs state-management
1 Answers

Apollo is not a state management library. It's an amazing client & cache for graphql, but when you start using it as a client-side state management, you'll notice that it isn't really meant for that. The amount of code you have to write is similar to vanilla redux, as you have to write your own resolvers for every local query and mutation, but since there is a text-based protocol in-between, you lose all type safety you could have when staying "pure JavaScript". And then you have to manually put your data into a normalized cache, even if your data is not normalized, so you'll start putting your settings into settings/1, because everything needs an id, even if you have only one instance of settings in your application. It all feels very clumsy from my experience.

Also, modern redux has a lot less boilerplate than you might be used to right now - if you follow the official recommendation to use redux toolkit (take a look at this page of the official redux docs), you'll write probably a fourth of code code you are used to with "vanilla redux". Modern redux doesn't have hand-written action creators, action types, switch-case reducers or immutable logic. Those are all implementation details that are handled under the hood by now.

I actually did a conference talk on the topic a year and half ago, so I have some examples.

Here is what you write with Apollo (and yeah, the example is a bit artificial for Apollo - but I wanted to use the same example for all libraries and a login flow was what I had gone for)

This is what it looks like in redux

user_20759440
Related