Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

goto(url, { replaceState: true, invalidateAll: false }) still calls load function IF load function reads URL #9390

Closed
feelinglovelynow opened this issue Mar 10, 2023 · 5 comments

Comments

@feelinglovelynow
Copy link

feelinglovelynow commented Mar 10, 2023

Describe the bug

goto(url, { replaceState: true, invalidateAll: false }) calls load function (even if goto() only updates params) only if we access the url provided to the load function

Example:

export const load = async ({ url }) => {
	console.log(Math.random());
	// uncomment line below to see bug when "Show more posts button" is clicked (load function is called)
	// console.log(url.searchParams.get('count'));

	const fetchResponse = await fetch('https://jsonplaceholder.typicode.com/todos');
	const posts = await fetchResponse.json();
	return { posts };
};

Reproduction

Created a tiny reproduction case

https://stackblitz.com/edit/sveltejs-kit-template-default-9jjrby?file=src/routes/test/+page.server.js

  • The /test route has a tiny infinite scroll feature, just scroll to the bottom of the page & click the "Show more posts" button
  • If line 4 of the server file is commented only 1 server log appears
  • If line 4 is uncommented, on every "Show more posts" button click, the load function is called

Goal:
Somehow be able to access url in the load function for first render and then do a replaceState on button click w/o calling the load function again

Logs

No response

System Info

stackblitz sveltekit latest https://stackblitz.com/edit/sveltejs-kit-template-default-9jjrby?file=src/routes/test/+page.server.js

Severity

annoyance

Additional Information

Thank you all for creating such a lovely product! I love SvelteKit!

@feelinglovelynow
Copy link
Author

Found a work around! Rather then touch the url the load function provides, get a new url via

const url = new URL(request.url)

Then carry on! Load function stops being called on goto()! May wanna look into this though! Thank you for such a lovely creation!

@feelinglovelynow
Copy link
Author

Solution causes anchors on the page that update the params to not call the load function, so not really a solution :(

@feelinglovelynow
Copy link
Author

This allows request in load function to get url + anchors on page that update params

function click (e: Event) {
  e.preventDefault()
  window.location.href = href
}

<a { href } on:click={ click }></a>

export const load = (async ({ request }) => {
  const url = new URL(request.url)
}) satisfies PageServerLoad

@feelinglovelynow
Copy link
Author

We lose the benefits of client side routing with the above solution btw

@dummdidumm
Copy link
Member

Closing as duplicate of #6294, because that feature would solve your problem.

@dummdidumm dummdidumm closed this as not planned Won't fix, can't repro, duplicate, stale Mar 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants