-
Inertia does have its limitations, and today we're going to take some time to talk through what exactly those are. To start with, requests sent with Inertia's router system. So that's requests sent with the use form helper,
-
that's requests sent directly with the router, and the link component as well. Must return back a valid Inertia page response. If we take a look at our routes,
-
we're doing this so far via the CTX Inertia render call. This builds out that Inertia response that we've seen that has our page component within it, as well as our prop information coming from
-
the props that we pass into our render method. At the end of the day, if I open up my browser here, it looks a little something like this. We have our component name, those props that we're passing through,
-
the new URL that we are at, and then versioning. Inertia is able to detect whether or not it is an Inertia request via its X Inertia header,
-
that it depends into all of its requests that it sends. When our responses for these requests do not match this specific structure, we're going to get an error and that request will not work.
-
For example, if we go ahead and hide our browser away, and take a look at our register post route handler. If we instead switch this from redirecting back to the previous URL, which in turn is going to end up
-
calling CTX Inertia render, and returning back a valid Inertia page response. If we instead switch this to return something like JSON, with maybe a success flag set to true.
-
Let's jump back into our browser now, head back into our register page. Let's fill out some information and some password there, and hit register. You're going to see that we get a modal pop up, by hide away the save password prompt,
-
saying that all Inertia requests must receive a valid Inertia response. However, a plain JSON response was received, and then it will say what the plain JSON response was.
-
It took a look at the response of our post request, determined that that response was not in the structure that it requires, seeing in its documentation here,
-
with the component, the props URL and version, and it threw an error because of that. Now we will only get this error, if that request is an Inertia request. So if we take a look at our request headers,
-
scroll down to most likely the bottom here, you'll see an X Inertia flag set to true here. Again, this is how Inertia is determining whether or not it is an Inertia request. In use cases like this,
-
where we're going to need a JSON response, that's where we're going to want to reach outside of Inertia for a solution instead, and use something like Axios or Fetch.
-
Again, Inertia uses Axios underneath the hood. So since we have Inertia installed, we should be a-okay to go ahead and jump into our page, scroll on up, import it.
-
So import Axios from Axios, scroll down, instead of posting with our form, let's instead of just do Axios post,
-
and rather than sending up an Inertia configuration, we want to send up our data. So we can just reach for our form, and then call the data method to get the data at time of submission here.
-
So now rather than using Inertia to send up this submission handler, we're now using Axios to send it up. Let's give that a save, jump back into our browser, and let's try our form one more time.
-
So I'll send up the same information here, and hit register, and you'll see that we no longer get an error because now we're using straight Axios to send up this post request. We take a look at the response,
-
we're going to get our JSON response, allowing us to do whatever it is that we need with this data. Now, of course, since we're no longer using the UseFormHelper to send up this request, that does mean that we're going to have to handle
-
the errors manually ourselves, because the UseFormHelper is no longer in charge of that request, but rather Axios is, because that's what we're using to send it. But if you need JSON responses,
-
that's how you can go about doing it. You just switch over to using Axios or Fetch to send your request, because Inertia is going to require its valid Inertia response in order to handle the request.
-
So let's go ahead and switch this back to how we have it, because we don't need to get back a JSON response for this request. Okay, so there we go. We're back to using our form, jump into our routes,
-
and switch this back to just redirecting back. There we go. Now, another Inertia limitation that you may run into is that it can only send and handle one request
-
and its response at a time, meaning that if you need to send out a flurry of requests simultaneously, Inertia is not going to be able to handle that, and you're going to have to reach for Axios or Fetch yet again
-
to go around Inertia to send those. Now, that is a limitation strictly in version one of Inertia. In version two of Inertia, which is coming soon at the present point in time
-
that this is being recorded, that's something that version two is going to support. So we won't have to worry about that in the future. And this shouldn't be that big of a hindrance, because you're going to be able to get responses
-
back to your user for the most part, before they're able to go to something else, click it to send out another request.
