How to update the page and query parameters in SvelteKit?

Question

I have a page with a search field. If accessed with a query parameter (e.g. ?word=cat) the page should load with results present and the search field filled. If a search is done the results and the query parameters (browser history) should update.

The only way I found to update query parameters is goto, so my attempt is:

<script context="module">
  export async function load({ page, fetch }) {
    const response = await fetch(`/data.json?${page.query.toString()}`)
    if (response.ok) {
      return {
        props: {
          word: page.query.get('word'),
          body: await response.json()
        }
      }
    }
  }
</script>

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

  export let word
  export let body

  function search() {
    $page.query.set('word', word)
    goto(`?${$page.query.toString()}`)
  }
</script>

<main>
  <form on:submit|preventDefault={search}>
    <input bind:value={word}>
  </form>
  <!-- ... -->
</main>

This works but sometimes gets stuck just updating the query parameters and nothing else. For some reason load isn't being called in those cases. I can get it to work reliably by adding await invalidate for the URL before the goto, but now load is always called twice and the search field flips back to the old value shortly.

I just started with Svelte/SvelteKit, so my approach is probably just wrong. Thanks for any help.

try removing the `$page.query.set` line and simple have `goto` that should be enough — Stephane Vanraes, Oct 17 '21 at 17:31
Thanks, I replaced it with a separate `URLSearchParams` and it works. — Steffen, Oct 18 '21 at 08:12

score 13 · Answer 1 · answered Mar 12 '22 at 14:52

13

$page.query is no longer available since it was replaced by $page.url (in @sveltejs/kit@1.0.0-next.208).

Now, it is done like this:

$page.url.searchParams.set('word',word); 
goto(`?${$page.url.searchParams.toString()}`);

$page and goto() you can get from:

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

answered Mar 12 '22 at 14:52

El Stefano

183
2
7

7

Actually, this will mutate `page`'s internal `URLSearchParams` which might cause some issues when working with reactive statements. A better way would be to create and mutate a new `URLSearchParams` from `$page.url.searchParams`, and then use it in the `goto` (`goto(newSearchParams)`). – Anatole Lucet Mar 22 '22 at 21:04

score 10 · Accepted Answer · edited Jul 02 '23 at 08:12

10

I had similar issue triggering loadfunction and I solved it by creating new instance of the URLSeachParams and navigating to these new params.

let query = new URLSearchParams($page.url.searchParams.toString());

query.set('word', word);
    
goto(`?${query.toString()}`);

edited Jul 02 '23 at 08:12

Wtower

18,848
11
103
80

answered Nov 04 '21 at 09:40

Jardulino

203
2
7

You don't actually have a create a new URLSearchParams object passing the page.query. the `$page.url.searchParams;` already returns a urlSearchParams object so you can just assign that to a variable: ```const urlSearchParams = $page.url.searchParams; ``` – Nicholas Mordecai Jan 22 '23 at 06:52
1

@Nicholas Mordecai I respectfully disagree. See Anatole Lucet's comment. – Wtower Jul 02 '23 at 08:10

score 3 · Answer 3 · answered Jul 25 '22 at 06:41

You can pass in a URL type in goto function.

const newUrl = new URL($page.url);
newUrl?.searchParams?.set('hello', 'world');
goto(newUrl);

https://kit.svelte.dev/docs/modules#$app-stores-page https://kit.svelte.dev/docs/modules#$app-navigation-goto

score 1 · Answer 4 · answered Nov 11 '21 at 12:51

1

An even shorter approach:

$page.query.set('word',word); 
goto(`?${$page.query.toString()}`);

answered Nov 11 '21 at 12:51

K. Anye

158
3
16

https://github.com/sveltejs/kit/issues/2785 – K. Anye Nov 12 '21 at 09:58

score 0 · Answer 5 · answered Aug 20 '23 at 17:08

0

To prevent an extra navigation and reload:

$page.query.set('word',word); 
history.replaceState(history.state, '', $page.url);

answered Aug 20 '23 at 17:08

Christopher Hicks

1

How to update the page and query parameters in SvelteKit?

5 Answers5

Linked