How to Mutate URL without causing reload?

[1MuhammadYahya]

The Problem:

I have a sveltekit app where I need to display a list of entries. As with any list of entries, I need pagination, sorting and ordering. The problem is that I would like the url to reflect these "states" to make it easier to share the list with other people. So something like "www.foo.bar/baz?query=x&sort=y&order=y&page=0".

Now while implementing this is as easy as it sounds the problem I face is that if someone wants to change some of these parameters, so for example someone wants to sort in a descending order, changing the url to reflect that causes a full page reload. Worst of all, it triggers the load function causing the usage of excess resources and a waste of the users' time.

I would like some way to mutate the url without having to reload the page.

My current solution

I currently have the following function

export const replaceState = ( values: Record<string, string> ) => {
    const url = new URL ( path ) // Reference to the page store url enrty

    for ( let [k, v] of Object.entries(values) ) {
        if ( !!v )
             url.searchParams.set( encodeURIComponent( k ), encodeURIComponent( v ) );
        else
            url.searchParams.delete( k );
     }

     history.replaceState( {}, '', null )l
 }

It works but I am not sure if this is the best way. Is there any way of achieving this in sveltekit? I would love to have a more native solution to the framework. Especially considering how I dont even know what the ( !!v ) means. Is this not just a boolean value which is the same as ( v )?

I just saw this online and pasted it into my project. Making a few changes here and there.
Any help would be greatly appreciated

[eltigerchino]

I highly recommend using GET forms to implement this as SvelteKit will intercept and retain client-side navigation on form submission.
https://kit.svelte.dev/docs/form-actions#get-vs-post
Submitting the form will update the URL with the search parameters matching the input names and values.

<form action="/baz">
  <label>
    Query
    <input name="query">
  </label>
  <label>
    Sort
    <input name="sort">
  </label>
  <label>
    Order
    <input name="order">
  </label>
  <label>
    Page
    <input name="page">
  </label>
</form>

Otherwise, you can manually call goto instead of history.replaceState is a good way to maintain client-side navigation (no reloads).

For example:
https://stackblitz.com/edit/sveltejs-kit-template-default-32bvj5?file=src/routes/+page.svelte