Build Modern Laravel Apps Using Inertia.js - Ep 6, Perform Non-Get Requests

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 slash lockout we should log out to 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 if it were a get request then over on john doe's website he could create a link that one 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 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 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 log out 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 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 log out 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 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 larifel 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 new tab so we once again get this familiar error so really in this case i don't want to render an anchor tag i really just want something like a button okay no problem in those cases let's declare that we want to render this link as a button 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 that automatically resets this 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 version two 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 i'll show you real quick if we want to fix that let's go to home and force some styling here maybe text for xl and font bold next the navigation will have some margin on top and then let's be explicit that we want list disk finally i think that's about it why don't we add real quick a section here and we'll add a class of and for all sections maybe we'll have px i don't know 8 or something like that actually in this case let's just do padding 8 all around anyways if we close that out and return to firefox here's what we get next we might want to add some initial styling for all of our nav links or if you want to remove some duplication you could even extract each of these into a nav link component which i often do so for example maybe we want the most basic form of a link almost the default styling so text blue and then when you hover over it underline it something like that but yeah if you want to remove the duplication extract it into its own navlink component anyhow come back and there we go whether we have an anchor tag or a button it all looks and renders the same and this time if i command click to try to open it in a new tab it's not going to work because it's not an anchor tag it's a button now in closing of course you can submit any request type you want so if you want to submit a patch request or delete request you can do so and you can even pass through the data as an attribute which is kind of cool so for example if i wanted to say foo is bar 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 die and dump 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 nav component this is incredibly useful for simple interactions like this where typically you'd have to create a forum listen for it to be submitted and then make the hx request you can now do it as part of the link component but for larger things you might want to instead reach for a nurse's form helper but for now this should get you going

Channel: Laracasts

Views: 1,103

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: aNZvFb402-U

Length: 6min 44sec (404 seconds)

Published: Tue Oct 12 2021