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.
Related
We have a screen that may need to call multiple endpoints to retrieve and save data. From a user perspective it is just one screen, but the system is making several ajax calls to separate apis to handle the data.
How do you handle UI state if any of these api calls fail? You can't really revert the changes that were successfully changed in some API calls. In your apps are you ok with some data saving and other parts not? It would seem that this is confusing for a user?
Any advice greatly appreciated.
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.
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.
I am currently developing a web app using vue. When my app starts it makes several requests to my api to get necessary resources.
await Promise.all([
store.dispatch('setUserOnStartup'),
store.dispatch('getAds'),
store.dispatch('getCompanies'),
store.dispatch('getCities')
]);
I am just wondering if you usually try to prevent this in your apps? If you make an endpoint where you get all the initial resources at once? For ex: /api/initial
Are there any other ways to prevent this or is it fine to do my approach with several requests initially?
Thanks in advance.
JSON API to the rescue.
You can fetch all you need with single request, if all entities you need are related. See http://jsonapi.org/format/#fetching-includes for details.
I'm working on a web application that need to expose Json API for external apps and I'm planning to do an API centric architecture.
So basicly, the app will juste contains view/controllers for the web interface. the controllers will use Route::dispatch to create a request to the api part of the site (another controller in a package, but in the same laravel installation), then parse the result, and create view accordingly.
So I'm wondering what are the drawbacks, performance wise, of using this sort of architecture?
If each controller is writing the logic to internally dispatch another request then I'd consider abstracting that away from the controller and in to your own dispatcher. I doubt there would be a huge performance overhead. The application (as far as I know) doesn't get booted twice so you don't have to worry about that.
The only thing you need to be aware of is the input for the main request being used. Something you should take into account inside your dispatcher. Refer to this answer for more information.
You can also read more on consuming your own API.