Query string uncleared on router.reload()

[eddysantos]

Hello,

I have a watcher over a reactive filter object which triggers a page reload whenever the filter changes.

Everything works fine, except when I clear one of the text inputs that filters by name on real time, when that input is cleared, the query string still remains with the last input it submitted to the server.

Is this by design? Should it have an option to be able to clear the query string if the specific property is unset?

[misterhell]

@eddysantos Hello, did you find how to fix it?
Because i made some dynamic filters and they are not removing when im unsetting them in filters config.

[eddysantos]

I found that the problem only happens when using the 'reload' method. Change it for the 'get' method and it would work fine.

[anchan42]

I think this is probably a bug. The query strings would not get removed if you remove them from the data option. It will update it if you change the value. I ended up setting them to null instead of removing them from the data object. This works but it makes the URL quite ugly.

[RobertBoes]

Why would this be a bug? It's pretty much intended behaviour. router.reload() uses the current URL of the page, as explained in the docs.

The reload() method is a convenient, shorthand method that automatically visits the current page with preserveState and preserveScroll both set to true, making it the perfect method to invoke when you just want to reload the current page's data.
https://inertiajs.com/manual-visits

What's discussed here is loading a new page, namely with different GET parameters than the current page. So the reload method does exactly what it's intended goal is; reload the current page. Inertia wouldn't be aware of how you're dealing with those parameters in the frontend, in the end those are just some refs you'd use to make an URL. This is the same approach Inertia takes in the PingCRM example; https://github.com/inertiajs/pingcrm/blob/8550afe5c05fd67413671db1b8ee7f3efcb236da/resources/js/Pages/Users/Index.vue#L98

[eddysantos]

I wouldn't call it a bug per se, because like what @RobertBoes says, it's kind of expected.

I would say that if the query string changes if you update it, it could/should? also remove the parameter if you remove it. However, not a huge deal since you can just get around this by using the .get() method instead.

[RobertBoes]

@eddysantos Hmm yeah, not sure actually, I do think the current behaviour is expected, but it might not be usable in all scenarios. Maybe it would be helpful if Inertia would do some processing.

For example you have the url /example?sort=desc, this is the current URL. So using router.reload({ data: { trashed: true }}) Inertia would merge the data with what's present in the URL. The same would happen with an empty object, since the current URL "initializes" it with data already present. It's like doing this:

const data = {
	...{
		sort: 'desc',
	},
	...{}
}

So to overwrite it you might need to use router.reload({ data: { sort: null }}) (no clue if that actually works)

[eddysantos]

That would for sure work, setting the params to null I mean. However, you end up with an ugly url, which may or may not matter for your use case.

In my opinion, the way you phrased it above kind of makes sense, the .reload() method is just a shorthand to reload the current page's data.

In that sense, I can either modify the params or not, because if it is just a reload, I shouldn't even be able to modify the query parameters, yet I can add to them, but not remove them.

So, it could stand to logic that if you can add params, you should also be able to remove them.

In the end, I am not a maintainer, and I am not ( regretfully ) skilled enough to submit a PR, so I'll take it how it is and work around as I can.

[anchan42]

In my case using get wouldn't partially reload. The page would reload every props.

This woud not work.

                const qryStr = Object.entries(lazyParams.value).reduce((a, [k, v]) => (!v ? a : { ...a, [k]: v }), {});
                    router.get(route('reports.index'),
                        qryStr,
                        {
                            preserveState: true,
                            preserveScroll: true,
                            only: ['reports'],
                            onSuccess: (page) => {
                                loadDataFromProp();
                            },
                        });

But this would.

               const options = {
                    data: lazyParams.value,
                    preserveState: true,
                    preserveScroll: true,
                    only: ['bdList'],
                    onSuccess: (page) => {
                        loadDataFromProp();
                    },
                };
            
                router.reload(options);

I am fully aware that I mught have done something wrong here but so far I could not find out what it is.
I clean up the URL after this using below on finish hooks but it would work consistently only after I put a delay on it.
Looks like inertia or vue also re-write the URL at the final stage:

                  let url = new URL(window.location.href);
                  let params = new URLSearchParams(url.search);
                  for (let [key, value] of params) {
                      if (!value) {
                          params.delete(key);
                      }
                  }
              
                  url.search = params.toString();
              
                  if (window.location.href !== url.toString()) {
                      history.replaceState(null, '', url.toString());
                  }

[MohamedLamineAllal]

For the ones that would find it useful

router.visit(window.location.pathname)

if a full reset is intended.

• use visit() or get() and window.location.pathname

[egemenk]

Also Ziggy can be used with visit() or get() to reload current page.

With parameters:
router.visit(route(route().current(), route().params))

Without parameters:
router.visit(route(route().current()))