Add a way to change the query params on a page easily.

Is your feature request related to a problem? Please describe. I would like an easy way to change the query params in the address bar at runtime.

Usecases:

• I want to sync a text input on the page to a query param so that when the user copies the address from the address bar and shares it, the link automatically has the field pre-filled.
• I want to pass an error message to another page that I want to display temporarily. I set the error as a query param and use goto to redirect to that page. If i let the user acknowledge the error banner and hide it, I want to remember that by stripping the query param from the URL so that when they refresh, the banner doesn’t re-appear.

Describe the solution you’d like An API that allows me to change the url, with convenient syntax for adding and removing query params. Ideally, this will not trigger a refresh of the page in itself.

Perhaps augment the goto API? https://kit.svelte.dev/docs#modules-app-navigation Describe alternatives you’ve considered There are workarounds for the usecases that I’ve mentioned, but this is a common enough usecase imo.

How important is this feature to you? Not a deal-breaker but it would allow me to have a simpler architecture that stores state more obviously, in the url, instead of a store. Additional context As an aside, It would also be nice to have a slicker way to append query params to a goto call. Currently, judging by the signature from the documentation, theres no way to do it.

goto(href, { replaceState, noscroll })

Thanks!

[bradphelan]

I have a version that creates a writable URL params store maybe similar to what @mohe2015 wrote

routes/filter.svelte

<script>

import {createQueryStore} from "$lib/URLSearchParamsStore"

const filter0 = createQueryStore("filter0")
const filter1 = createQueryStore("filter1")

</script>

<p>Input filter</p>
<input bind:value={$filter0}/>
<input bind:value={$filter1}/>

store.js

import { goto } from "$app/navigation";

import {page} from "$app/stores"

function queryToObject(params){
    // parse query string
    const obj = {};
    // iterate over all keys
    for (const key of params.keys()) {
        if (params.getAll(key).length > 1) {
            obj[key] = params.getAll(key);
        } else {
            obj[key] = params.get(key);
        }
    }
    return obj;
}

export function createQueryStore(prop) {
  var query = undefined
  return {
    subscribe: h => { 
      return page.subscribe(p=>{
        query = queryToObject(p.query)
        h(query[prop])
      })
    },
    set: v => {
      query[prop] = v
      const urlSearchParams = new URLSearchParams(query)
      const g = `?${urlSearchParams.toString()}`
      goto(g, {keepfocus:true, replaceState:true, noscroll:true})
    },
  };
}

[Rich-Harris]

Reading between the lines, I think what everyone wants is a way to goto without triggering a navigation. It’s easy enough to do this…

const url = new URL(location);
url.searchParams.set('foo', bar);
goto(href, { replaceState: true });

…and you create whatever helper function you like around that, but the fact that it triggers navigation (and with it, load) is problematic in some cases. For example it causes inputs to be blurred, which is undesirable.

As such, I think this is effectively a duplicate of #2673.