Inertia Plain Axios Request - vue.js

Question

Its a very normally requirement that a web page may have multiple API requests.
I have been Inertia.js and this works very good but it lacks a very important feature to make plain XHR requests.
However Inertia.js provides Inertia.reload() but it some cases it's not very useful.
I am looking for something like Inertia::xhr() keeping in mind that I can still use Inertia.js interceptors like onStart, onFinish etc.
Anyone can help to achieve this?

Answer 1

You can do plain XHR requests with Axios (which is already a dependency anyway), or alternatively use the native Fetch api.
From the docs:
Using Inertia to submit forms works great for the vast majority of situations. However, in the event that you need more fine-grain control over the form submission, there's nothing stopping you from making plain xhr or fetch requests instead. Using both approaches in the same application is totally fine!
See also here

Answer 2

If you do a Interia::visists it will cause a full page reload.
If you want to prevent that making a call with axios/fetch makes sense. For example, if you just want to add a comment functionality, you may not want to reload the entire page. If the page is slow, the user will feel the delay when adding the comment.
Only thing you have to take care is CSRF token. If you used axios, it should read the XSRF-TOKEN from cookie automatically.
If you use the fetch api, you would need to manually provide the CRSF token.
Meaning you have to either read it from shared data or from the cookie.
If you add it to shared data, it would look like this:
public function share(Request $request): array
{
$isAdmin = Auth::user() instanceof Admin;
return array_merge(parent::share($request), [
'csrf' => csrf_token(),
'session' => [
'notification' => session('notification'),
],
'auth' => self::share_auth(Auth::user()),
]);
}
and your fetch request would look like this:
fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': usePage().props.value.csrf
// 'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify({ name: name}) // body data type must match "Content-Type" header
});

Answer 3

Intertia doesn't support plain XHR request.
But we have written a package that provides very similar APIs as Inertia.
https://github.com/JoBinsJP/formjs