load function not running when changing searchparams via goto

[Cluster2a]

Describe the bug

When changing the searchparams via links, the load function runs on each change.

If the parameter is changed via goto only the first goto triggers the load.

As a workaround, I could call invalidate manually.

Reproduction

https://codesandbox.io/p/sandbox/charming-einstein-yvkztt

• click on each link is working fine
• if switching page via button only the first button click triggers page load

Logs

No response

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (2) x64 AMD EPYC
    Memory: 555.15 MB / 1.63 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
    Watchman: 20220528.183901.0 - /usr/local/bin/watchman
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.87 
    @sveltejs/kit: next => 1.0.0-next.541 
    svelte: ^3.46.0 => 3.53.1 
    vite: ^3.1.0 => 3.2.3

Severity

annoyance

Additional Information

No response

[eltigerchino]

Changing $page.url then calling goto() seems to exhibit buggy behaviour. It works as expected if you simply call goto() without modifying the page store.

// calling goto() will change the $page.url.searchParams for you
await goto(`?page=${pageNumber}`);

Working example below: https://stackblitz.com/edit/sveltejs-kit-template-default-c7qtfl?file=src/routes/+page.svelte

I'm wondering why $page.url isn't read-only, and if it is meant to be modifiable, why doesn't sveltekit sync those changes with the browser address bar?

[Cluster2a]

Changing $page.url then calling goto() seems to exhibit buggy behaviour. It works as expected if you simply call goto() without modifying the page store.

// calling goto() will change the $page.url.searchParams for you
await goto(`?page=${pageNumber}`);

Working example below: https://stackblitz.com/edit/sveltejs-kit-template-default-c7qtfl?file=src/routes/+page.svelte

I'm wondering why $page.url isn't read-only, and if it is meant to be modifiable, why doesn't sveltekit sync those changes with the browser address bar?

Actually, I am not setting the store, I set the searchParams. https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams

[dummdidumm]

$page.url should be seen as readonly, so changing it should have no effects. Creating a readonly-version of the built-in URL object sounds cumbersome and would add needless bytes to the resulting bundle. I'm therefore inclined to close this.

Alternatives:

• some kind of dev-time only check that the setter methods aren't called

[7antra]

I don't understand, is this a bad practice ?

// https://blabla.com?page=2
// +page.svelte

const addParams = (num) => {
   const newUrl = new URL($page.url);
   newUrl.searchParams.set(other, 'hello');
   goto(newUrl);
}

<button on:click={() => addParams()} />

I expected to go to https://blabla.com?page=2&other=hello but it's not the case

[eltigerchino]

I don't understand, is this a bad practice ?

// https://blabla.com?page=2
// +page.svelte

const addParams = (num) => {
   const newUrl = new URL($page.url);
   newUrl.searchParams.set(other, 'hello');
   goto(newUrl);
}

<button on:click={() => addParams()} />

I expected to go to https://blabla.com?page=2&other=hello but it's not the case

This is completely fine and does work. Example: https://stackblitz.com/edit/sveltejs-kit-template-default-c7qtfl?file=src%2Froutes%2F%2Bpage.svelte Append a search param to the current page, then click one of the buttons to see the new URL.

[7antra]

Mea culpa, it was a bug in my code ! Sorry for the confusion.