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.
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.
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.
Related
I'm using React and Redux-Saga there are many API calls in my project. Is there a way to have a global cancelToken/AbortController that can somehow be attached to the sagas middleware or added to axios globally?
I found many resources for cancelling a single API call, but my application has a huge amount of API calls and adding cancel functionality for all might be a hassle, so I'm looking for an alternate way.
I'm trying to figure out how I might be able to adopt Apollo in my React Native project compared to RXJS & Redux.
One of the special things about this app is that data mutations are not done through a traditional API but through Blockchain based transactions. Therefore I cannot simply call mutate in Apollo and expect it to eventually mutate something on the database as it's gonna go to a completely different several using a completely different library.
Would it be possible to have some kind of middleware which intercepted a mutation request and redirected it to another async library to get the job done? I'm wondering if apollo-link might be the way to do it.
So I've been building my new app with GraphQL. It works great with modifying my apps models. But I find there's a serious hole in the way GraphQL works that REST API's handle better. For example, here's my use case:
When a form on my frontend is submitted, it creates a mutation: createFoo.
This alone works great. It creates a new Foo object in my database. But now I have this additional use case:
When the form is submitted, I want to hit a service that not only creates a Foo object in my database, but I also want to hit a third party API (some service I'm using) notifying me of the new creation.
How do I achieve this? With a REST API I would simply add that additional task as part of the API endpoint. With GraphQL there is no concept of a service layer that does other business logic. Should I do this in the mutation? It seems like a weird side effect to add some additional business logic to a mutation that creates an object..How are these things thought of in GraphQL world?
I am new to parse.com and react. All of the samples I've seen are based on Flux with actions and stores. ParseReact uses observe() and mutators in the react components. Does this violate the flux model and remove the benefits of encapsulation of the stores? Should I somehow create actions and stores with ParseReact?
ParseReact implements its querying and subscription interface in a similar way to how relay is designed to work with a react component. The advantage is that you get to specify exactly the data each component needs, rather than using a controller view wired to a store which will pass down all data to every component under it. And also similarly to Relay, ParseReact uses a global store so that it can keep every subscription updated in every component across the app.
So if you are just using data from Parse, there doesn't seem to be a need to wire up stores. However, if you are creating local application state from a combination of remote and local data, the flux pattern may still be necessary. For example, maybe you want to have a set of app-wide configuration options. They would likely be set in a settings panel somewhere, and use the flux pattern to change state across the entire app.
We are in the process of designing/creating restful web services that will be consumed client side using XHR calls from various web pages. These web pages will contain components that will be populated by the data retrieved from the web services.
My question is, is it best to design the return data of the web services to match specifically what the client side components will require for each page? Therefore, only one XHR call will be required to retrieve all the data necessary to populate a specific AJAX component or to update a specific page. Or is it more advisable to develop generic web services, that match for instance a database schema, and will require multiple XHR calls client side to retrieve all the data to populate an AJAX component? The second approach seems to lead to some messy coding to chain calls together to retrieved all the data required before updating an AJAX component.
Hopefully this makes sense.
You should always design services based on what they are to provide. Unless you need a service that retrieves rows from the database, don't create one. You may find you need a service that returns complete business entities - they may be in multiple tables.
Or, you may just need a service to provide data for UI controls. In that case, that's what you should do. You may later find that two operations are returning almost the same data, so you may refactor that into one operation that returns the data for both.
My general rule of thumb is to do what ever is the smallest to transmit over the ajax call. In theory, the more data that is sent to the client the slower the update process. This, of course, would necessarily mean specific services for specific pages.