Control Param serialization of get requests about inertia

[thoresuenert]

Finally i found the problem:
tl:dr; because of a axios version mismatch npm installed a private version in the node_modules/@inertiajs folder.

Inertia updated axios to v0.19
In PingCRM axios is installed seperately as v0.18.0 which results in @inertia in v0.1.0

When you install inertia with a version mismatch axios 0.18 and 0.19 npm will install an own module within the node_modules/@inertia/node_modules/axios folder.
After that the interceptor intercepts the wrong version of axios

[sebastiandedeyne]

Inertia uses axios under the hood, so for now you can just override axios' own paramsSerializer using an intercepter, and Inertia will pick it up too.

https://github.com/axios/axios#interceptors

[thoresuenert]

@sebastiandedeyne can you provide an example?

When i use the following code i am not able to intercept inertia requests:

//app.js
import { InertiaApp } from "@inertiajs/inertia-vue";
Vue.use(IntertiApp);
import axios from "axios";
axios.interceptors.request.use(
    function(config) {
        // Do something before request is sent
        console.log(config);
        return config;
    },
    function(error) {
        // Do something with request error
        return Promise.reject(error);
    }
);
...

new Vue(....)

I dont understand what happens when i import multiple times, maybe that is the problem. Otherwise i cannot intercept because axios is not global

[Juhlinus]

@thoresuenert First off, you've misspelled InertiaApp.
Vue.use(IntertiApp);

That might be enough for your app to not work.

I got it working with the following in a fresh PingCRM clone:

import { InertiaApp } from '@inertiajs/inertia-vue'
import PortalVue from 'portal-vue'
import Vue from 'vue'
import axios from 'axios'

Vue.config.productionTip = false
Vue.mixin({ methods: { route: window.route } })
Vue.use(InertiaApp)
Vue.use(PortalVue)

axios.interceptors.request.use(
    function(config) {
        // Do something before request is sent
        console.log(config);
        return config;
    },
    function(error) {
        // Do something with request error
        return Promise.reject(error);
    }
);

let app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
    },
  }),
}).$mount(app)

[thoresuenert]

First thanks for the fastest answer ever received :D

@Juhlinus can you confirm the following please:

When you update inertia to latest tags it breaks the interceptor?

"@inertiajs/inertia": "^0.1.3",
"@inertiajs/inertia-vue": "^0.1.1",

with 0.1.0 its work like you said.