Inertia: Reloading with data duplicate query parameters

[dsazup]

If I am on a /users?page=1 page, and I click on a button that does

Inertia.reload({
  data: {
    page: 1,
 }

I now see /users?page=1&page=1, and it keeps duplicating when I click again. Is this expected behaviour or is this a bug?

[Juhlinus]

Hello @dsazup !

It's the expected behavior. The replace method just fetches the current url and adds your parameters to it, so if you just pass the same argument data over and over, then the same data will be added to the URL.

This might be something that we'd want to check for upon calling the method as to not generate the result you're experiencing.

Maybe something along these lines:

  replace(url, options = {}) {
    return this.visit(url.split('?')[0], { preserveState: true, ...options, replace: true })
  },

[dsazup]

Ok, makes sense, thanks. It would be really nice if Inertia handled this, but I suppose this might be out of scope for this project. I'll leave it up to you guys to decide what you want to do with this issue 👍

[reinink]

Hmm, yes, that's not great. This happens here:

https://github.com/inertiajs/inertia/blob/da004ee147cf53a7f02804f50dc0a324ecb9fdec/src/inertia.js#L58-L62

I kind of wish Axios dealt with this problem, because I agree, it would be nice if the values were merged together.

Going to leave this issue open. Maybe we can find a fix at a some point.

[RSpeekenbrink]

Maybe its an idea to replace 'window.location.href' in:

https://github.com/inertiajs/inertia/blob/472c1d3daa455b67df68aa71b6e2a656724d9652/src/inertia.js#L160-L162

With something like:

window.location.origin

and some kind of parser to parse the current url parameters to the data object in the options function parameter? And the parser will prefer option data over current url parameters so you can 'replace' them?

Just some brainstorming :) it would be nice indeed to fix this in Inertia.

[hotmeteor]

Any solutions on this one?

[hotmeteor]

Alright, here's how I made it work (I'm using Ziggy as well):

this.$inertia.replace(route(route().current(), route().params), {
    method: 'get',
    data: this.filters,
    replace: false,
    preserveState: true,
    preserveScroll: true,
    only: ['logs'],
})

[markkingDS]

This is how I was able to get it to work. Little different from what @hotmeteor used:

this.$inertia.replace(route(route().current(), {}), {
            method: 'get',
            data: {
                'sortBy': this.sort.by,
                'sortDirection': this.sort.direction,
                'searchTerms': this.terms,
                'page': this.page
            },
            preserveState: true,
            preserveScroll: true,
            only: ['data', 'searchTerms', 'sort']
        });