CODEWITHSUNDEEP
reactjsgraphqlreact-apollo
RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

Reactjs with redux, Apollo+graphQL

It opinions based questions . Need one suggestion.

In Reactjs, is it right approach to use redux for state management and for API call use Apollo + GraphQL?

Upvotes: 1

Views: 745

Answers (3)

Robin Wieruch
Robin Wieruch

Reputation: 15908

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. However, Apollo Client introduced apollo-link-state which can be used for the local view 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.

Upvotes: 1

user7887589
user7887589

Reputation:

I suggest Apollo GraphQl because it has many benefits:

Eliminate Boilerplate No more action creators, async handling, and request waterfalls. Just ask for the data you need with a GraphQL query, and it shows up.

Validation across the stack Identify breaking changes in your API before they are deployed, and statically validate data fetching across all of your frontends.

Understand API usage Learn how your backends are being used with field-by-field granularity. Find and address performance hotspots easily.

Pull complexity out of the client Put computed fields, data transformations, and security logic into your API so your frontends don't have to reimplement them every time.

Incrementally evolve your API Add fields to GraphQL as you go and deprecate old fields when you no longer need them. Mock some or all of your API and build the frontend in parallel.

Improve performance Fetch exactly the data you need, no more and no less. Improve performance with GraphQL-specific caching and optimizations across the stack.

For more Information Read GrapQl Apollo Doc https://www.apollographql.com/docs/

Upvotes: 0

batjko
batjko

Reputation: 1062

That's certainly possible and the natural thing to do. We use this same setup and we found we don't have to use Redux very much anymore.

We used to use Redux to store our API responses (the data) as well, but now Apollo manages that for us.

So our Redux store is now only used for the actual UI state (e.g. routing state, user preferences for certain views, whether something is enabled or not etc).

All data is now retrieved by Apollo and kept in its own internal Redux store, which it uses as a cache. This works great and nicely separates UI state from data state.

Upvotes: 0

Related Questions