Laravel Inertia onSuccess on router object and preserveScroll
We will learn about the options parameter when using the router object in Laravel Inertia for when the request is executed and when preserving the scroll.
Before finishing this section I want to give an extra class here to give some additional considerations that you can take into account to make the page reload a little more efficient, one of them is the one I was telling you about, obviously this:
create() {
this.todoSelected = 0
router.post(route('todo.store', {
name: this.form.name
}))
setTimeout(() => window.location.reload(), 500)
},It seems horrible to me but no matter how it is, it is there in case you have many complications you can always use the Time out to reload the page after a while obviously as I told you it seems horrible to me because it is not a time synchronized with how long the operation really takes so it may need a little more or a little less it can cause many problems here but no matter how it is it is a way that could be said to be valid the other way was what I was telling you which is using the options of the methods the post put path delete type methods and also the get one we have several options.
Custom Callbacks
In this section, we will talk about the callback methods that are invoked depending on the status of the request, for example:
- onBefore, when the request is initiated.
- onProgress, when the request is in process.
- onSuccess, when there is a response.
- onError, when a problem occurs.
Specifically, we have:
router.<method>('/post', <data>, {
onBefore: visit => {},
onStart: visit => {},
onProgress: progress => {},
onSuccess: page => {},
onError: errors => {},
onFinish: visit => {},
})That will be executed based on the status of the request, well these would be at the beginning, this would be when it is in progress, this would be when it was completed, if it was canceled, if it was finished and if an error occurred, then we can take advantage of this to improve the process that we already have, remember that everything begins with the synchronization problems at the time of performing the operations, I already implemented it, so I'm simply going to show it to you so you can see how it works, then logically what we are going to need would be precisely the onFinish that would be executed at the time of finishing the operation and with this we can reload the page, so here note that I already implemented it, in this case I am showing you the remove one:
router.delete(route('todo.destroy', this.deleteTodoRow), {
onSuccess: (page) => {
// console.log(page)
console.log(page.props.todos)
this.dtodos = page.props.todos
// setTimeout(() => window.location.reload(), 500)
},
})
This is very pending here, the complicated thing here would be to synchronize this, place this well because it is already very nested, but here we have the method, here we have the route, it would be up to here, you place a comma, you place the curly brackets here to indicate that it is going to be an object, for the moment, remove this. If you want, and here you would place the mentioned method, notice that although it is marking an error, VSC is really fine, I think it is not working here, well, I do not know why it marks me as an error here, then what does the page object bring? The damn page object brings this. It would be to remove, I am going to remove one, here we have it. Well, this would be to see which was the first, the page print, and the other, the one for everyone, basically brings what the prod page brought that we had before, information about the component, here it brings the props, if the cart is authenticated, we place it, errors, flash message, which we configure, this one that has nothing to do with it, here, the one for everyone, which is the one that interests us, here we have, look at the list of the everyone, which are the ones that we could use, once reloaded, so to speak, that is, once the operation has been carried out, whether it is creation, update, or in this case. deletion and we have the array updated therefore we can assign it directly so that it overwrites what we currently have and that is what I do to access it. You simply have to follow the tree here, there is nothing strange about it, it is an object, so you follow it there, which is what I did here and the matter is settled, with that it is updated perfectly.
Preserve the scroll
What is the other problem that we have, look here at the scroll, already commenting here a little thing from you for that here we have the option to preserve scroll, all this you can find in the official documentation, what parameters you can pass here and what it does is exactly as its name indicates, preserve the scroll, therefore if we are down there lost our lives, for example, here, look, the scroll is going to be preserved, which was what we wanted or what we should want for this type of cases, and what you want to do here, if you want to do an animation or whatever, that depends on you, but the process already works without problems. So this would be the recommended way to do this synchronization, this would be to remove update as I told you, it would not be necessary because we are already modifying everything directly, so I can leave it like this here as I told you, it marks error but it is fine, it is a bit of the nesting that we have here pending with the route, you place the comma, you place Well here would be the for the dep, it would be the Data part and after this you place the success Finish error, whatever you want to handle and you finally place the method. This does not convince me much. I think it was better, I hope they change it at some point, it was better to do the process of or use the scheme that we have in javascript of promises that I think is almost a standard You could say but well we do not have a kind of equivalent that would be the one I showed you before so finally to solve the problem that I mentioned to you before I would recommend that you use this scheme of course for the rest here it is the same we simply assign all the procs that in this case would already be the ones we have created, let's check it here quickly I put here I go to all yes all yes we give an yes and notice that here we have it so with that we solve the problem and we are going to finish this section and continue with the next one:
router.delete(route('todo.destroy', this.deleteTodoRow), {
preserveScroll: true,
onSuccess: (page) => {
// console.log(page)
console.log(page.props.todos)
this.dtodos = page.props.todos
// setTimeout(() => window.location.reload(), 500)
},
})- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter