Ok, As per my understanding we use middleware in redux for all the async calls now from Apollo documentation we can directly use queries and mutation inside our component.
I personally thought that writing all the business logic in a separate place using middleware is more intuitive as it helps in keeping business logic away from UI (where the data interchange could take place using redux)
Is there any way to keep my business logic separate using redux middleware with GraphQL rather than mixing it in my UI ?
Just like fetch or axios in redux-logic's create-logger.
Asked
Active
Viewed 2,259 times
2
Sparsh
- 247
- 1
- 12
-
Have you considered using Apollo's built in state management (formerly apollo-link-state)? That enables you mutate and query your state in the same flavor as GraphQL. You can also query your cache and backend in the same query. https://www.apollographql.com/docs/angular/guides/state-management/ – Jay Kariesch Oct 03 '19 at 22:09
-
Thanks for the info, I didn't get chance to see apollo-link-state. So if I use apollo-link-state I would not be needing redux to manage my state. Right – Sparsh Oct 04 '19 at 06:43
-
That's correct, but since apollo-link-state is now baked into Apollo Client, it's already available to you – Jay Kariesch Oct 04 '19 at 10:33
2 Answers
2
Is there any way to keep my business logic separate using redux middleware with GraphQL rather than mixing it in my UI ?
You can achieve it by using apollo-fetch with redux-saga which is a Redux middleware.
When there is a need to fetch data, dispatch a simple sync Redux action. It gets intercepted by redux-saga that can use Apollo to fetch the data asynchronously, can perform other async actions in response if needed and then dispatch one or several sync actions to Redux store.
The business logic can then be split between async redux-saga functions called 'sagas' that could trigger other sagas to accomodate more complex logic and finally dispatch action(s) to Redux which remains the main 'source of truth' in your application.
winwiz1
- 2,906
- 11
- 24
1
Given that my team is already using graph/Apollo Client, we've recently been moving away from using Redux, and rather opting for Apollo Client's built in solution to manage local state. As noted in its docs:
Apollo Client (>= 2.5) has built-in local state handling capabilities that allow you to store your local data inside the Apollo cache alongside your remote data. To access your local data, just query it with GraphQL. You can even request local and server data within the same query!
More specifically, using the @client directive, you flag that you would like to fetch the field data locally using either a client-side resolver to execute local queries or mutations, or from the cache. You can take a look at the docs here. The ability to use this single tool has simplified our local state management. More importantly, this solution could meet your request to have more seperation between UI and business logic, as that logic should largely be encapsulated in your client-side resolvers, which can handle async requests, including requests over the network.
Greg Brodzik
- 1,765
- 7
- 9