React-apollo : React local data management using Apollo-link-state and Apollo-link
Apollo-link-state and apollo-link packages can be used for your server and local data management in react apps. you can completely get rid of redux library now. All the asynchronous fetching and UI update will be taken care by apollo-client.
You can create default state for our application and client side resolver, map this with remote GraphQL server mutations using apollo-link. Now can fetch both client and server data in the same query, just by mentioning the client directive @client in the client only field.

The above code creates a Boolean called toggleCompletedVisibility as false in the default application state. WithClientState creates object with mutation and queries from client side.
const client = new ApolloClient({ link: ApolloLink.from([stateLink, httpLink]), cache });The above code links our application local data with remote data. That’s all..! now you can access the toggleCompletedVisibility from any component as it will be present in the cache.

In the above query example , toggleCompletedVisibility field is mentioned only in the client side, apollo-client merging the results from remote server data and client data normalises it and stores it in the cache. The query result looks like as if we are getting all the data from server.
In the demo application, I have used toggleCompletedVisibility boolean flag to show/hide completed todos.
You can find the source code here.
I have written an article on, how apollo-client reduces the code and complexity in state management in react applications. Check out the article if you are interested in.
One more thing about apollo is , their dev-tools extension is awesome. You must try, if you are using apollo client for front end development.
Below is the demo video on todo app and its devtools usage.
To conclude, Apollo-link-state and apollo-link is indeed will replace redux with respect to data management in the react applications, still it has some drawbacks while comparing with redux/redux-sagas. It is not fair to compare apollo-state with libraries like redux-sagas which is meant for asynchronous logic controls. I just wanted to give some idea on what redux-sagas can do easily , where react-apollo needs some more logic and code to achieve the same.
- Retrying the failed fetch requests. This can be done easily in sagas.
- Dispatching chain of actions based on user behaviour , actions are not involved in data fetching.
- Updating the authentication token periodically.
- Writing complex async logic in a synchronous fashion for better readability and maintainability.
