Now, let's return to Inertia Links for one more episode and figure out how we can create non-get requests. For example, if you want to make a POST request or a PATCH request, how do we do that with Inertia? And there's actually a couple ways. Now, let's do this. I will return to my routes file, and let's create a dummy route for logging out. So if you visit /logout, we should log out the User. But of course, as you may know, we should really perform that as part of a POST request. It adds just a little bit more security.

But of course, as you may know, we should really perform that as part of a POST request. It adds just a little bit more security. If it were a GET request, then over on John Doe's website, he could create a link that when clicked would log you out of my website. So when we switch to POST, we protect against that a bit, and we do add CSRF protection as part of the request. Okay. Now, we don't have any authentication system here. I haven't pulled in Laravel Breeze or anything like that. So I'm just going to die and say, logging the user out.

I haven't pulled in Laravel Breeze or anything like that. So I'm just going to die and say, logging the user out. All right. We now have our endpoint. The next step will be to return to our nav bar, and let's add another link here to log out. Now, of course, in future episodes, I will show you how to conditionally display links like this based on, for example, if the user is signed in or not. But that's getting a little ahead of ourselves. Right now, we're still playing around with Inertia links.

But that's getting a little ahead of ourselves. Right now, we're still playing around with Inertia links. Okay. So yeah, if I did this, well, of course, it's going to make a GET request to that endpoint. Let's give it a shot. So back to Firefox, I give it a refresh, and here's our logout link. And yeah, of course, if we run it, well, two things. Of course, it fails because we haven't registered a route to respond to a GET request to logout. But second, notice when we have errors in Inertia, they display in this nice modal. And we're going to set this up so that it only displays in your local environment.

But second, notice when we have errors in Inertia, they display in this nice modal. And we're going to set this up so that it only displays in your local environment. But nonetheless, it's incredibly useful. I like it a lot, and I think it actually was inspired by Laravel Livewire, which is pretty cool when the two can inspire each other. So anyways, how do we turn this into a POST request? Well, as you know, traditionally, you would have to wrap the whole thing in a form that submits a POST request. But Inertia has a little bit of sugar to clean this up. Let's add the method attribute and set it to POST.

But Inertia has a little bit of sugar to clean this up. Let's add the method attribute and set it to POST. Okay. That's all we need to do. So if I come back and give it a refresh, I'm going to bring up the Network tab to XHR. And this time, when I click Logout, notice we do submit a POST request. And we do get the response from that endpoint. All right, but let's see what's going on here. If I view the source here, yeah, it's still just rendering an anchor tag. But behind the scenes, Inertia will have an event handler to listen for that click, and

If I view the source here, yeah, it's still just rendering an anchor tag. But behind the scenes, Inertia will have an event handler to listen for that click, and then it will submit a POST request to the endpoint. And behind the scenes, Inertia uses the Axios library to perform the requests. Which means, by the way, if you're using Laravel, passing through the CSRF token is automatic because Laravel will automatically include it as part of the response, and then Axios will automatically check to see if a cookie exists. Okay, but now there's one little snag here. Because it's an anchor tag, that means on a Mac, I can command click on it. And notice when I do that, of course, I can't submit a POST request as part of opening a

And now, notice if I refresh the page, we have the default styling here, but we are rendering it as a button. And we get the same thing when I click on it. Okay, and that's usually what you will want in this case. Now in terms of styling, you may run into this where you want the button to look the same as the links. So generally, you will want to reset the styling for a button or pull in a CSS library that has a normalizer that automatically resets this. For example, if I were using something like Tailwind, which is really popular. Let's do it right up here.

For example, if I were using something like Tailwind, which is really popular. Let's do it right up here. I have a little snippet to pull that in. 1 and 2 of Tailwind. But notice that automatically will reset it. So if I give this a refresh, I lose a little of my automatic styling here, and that's okay. But it does render exactly the same as the links. So actually, real quick, if we want to fix that, let's go to home and force some styling here. Maybe text-xl and font-bold.

Now if we come back and refresh, have a look here. When I make the POST request, notice that it will pass through that data as part of the request. So then, of course, on the server side, just fetch it the way you always would. So for example, if you want to dd and grab foo, this would do the trick. One more time, and you get the value for foo. Now in closing, I think you'll find if I switch back to the NavComponent, this is incredibly useful for simple interactions like this, where typically you'd have to create a form, listen for it to be submitted, and then make the AJAX request. You can now do it as part of the LinkComponent.

listen for it to be submitted, and then make the AJAX request. You can now do it as part of the link component. But for larger things, you might want to instead reach for a NERUSHIS form helper. But for now, this should get you going.