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.

[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.

[aeruggiero]

I totaly agree with this comment.
An option to remove unwanted parameters should be present (keep only available or keep everything no matter what).
If I can add them, why shouldn't I be able to remove them?

[pascalbaljet]

You can remove them by passing them as undefined.

[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()))

[vedmant]

router.visit refreshes the page and remounts components, which is not what I wanted to achieve

[patie]

I totally agree with the previous comments—the reload method behaves unexpectedly… 🤷‍♂️ Anyway, if anyone is looking for a solution, I managed to fix it like this!

By setting preserveState: true and preserveScroll: true in visit(), the data reloads efficiently without affecting the view or causing unnecessary movement.

type QueryParamsType = {
    page?: number;
    sort?: {
        name?: string;
        email?: string;
    };
    filter?: {
        global?: string;
    };
};

const onFilter = useDebounceFn((value: string) => {
    const routeParams = <QueryParamsType>route().queryParams;

    // Ensure the filter object exists
    if (!routeParams.filter) {
        routeParams.filter = {};
    }

    // If the filter is empty, clean up the object
    if (value.length === 0) {
        delete routeParams.filter.global;
        if (Object.keys(routeParams.filter).length === 0) {
            delete routeParams.filter;
        }
    } else {
        routeParams.filter.global = value;
    }

    // Navigate while preserving state & scroll position
    router.visit(route('client.list', routeParams), {
        preserveState: true,
        preserveScroll: true,
        only: ['clients']
    });

}, 500);