Support for global query params that get preserved on navigation

Is your feature request related to a problem? Please describe. Currently I need to keep track of query string that are supposed to be used across the application and inject them in every link. This is because svelte will take in consideration the given href and if that href do not contains any query string, then none will appear in the next navigation.

This is expected as this is the normal behaviour for browser. But it is often the case that query string are used as global config across the app and for it to not get reset on every navigation, we need to ensure it get added there every time. This is especially important in the context of static site.

This would be great if there was a way to inject these on navigation in svelte kit (maybe it is already possible somehow?)

An example of a router that support that quite easily is curi

Describe the solution you’d like The solution that might make more sense is to let user of svelte kit transform navigation request. Like there could be a onNavigation callback where we can change the request.

How important is this feature to you? Without it I would need to remove the use of <a href links and use a component that inject the global query params.

[Rich-Harris]

This can be achieved like so:

<script>
  import { page } from '$app/stores';
</script>

<a href="/whatever{$page.url.search}">whatever</a>

I think this is a sufficiently niche requirement that SvelteKit doesn’t need to make it any more convenient than that.

[einarpersson]

@wighawag

alright, I ended up using beforeNavigate in +layout.svelte like this:

beforeNavigate(({ from, to, cancel }) => {
    if (from.url.searchParams.has('foo') && !to.url.searchParams.has('foo')) {
      cancel()
      goto(to.url.pathname + `?foo=${from.url.searchParams.get('foo')}`)
    }
  })