20

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.

CC BY-SA 4.0
2

6 Answers 6

Reset to default
26

I had similar issue triggering load function and I solved it by creating new instance of the URLSearchParams and navigating to these new params.

let query = new URLSearchParams($page.url.searchParams.toString());
    
query.set('word', word);
        
goto(`?${query.toString()}`);
CC BY-SA 4.0
2
25

$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";
CC BY-SA 4.0
1
  • 14
    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
    Commented Mar 22, 2022 at 21:04
4

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

CC BY-SA 4.0
1

An even shorter approach:

$page.query.set('word',word); 
goto(`?${$page.query.toString()}`);
CC BY-SA 4.0
1
0

To prevent an extra navigation and reload:

$page.query.set('word',word); 
history.replaceState(history.state, '', $page.url);
CC BY-SA 4.0
0

Try this snippet on your page.

Subscribe to query parameter changes with a reactive statement if needed:

I think this is a better approach than navigating to a different page with goto()

http://localhost:5173?tag=travel

<script lang="ts">
  import { page } from "$app/stores";
  // Reactive statement to log a specific query parameter
  $: console.log($page.url.searchParams.get('tag'));
</script>
CC BY-SA 4.0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.