How to perserve the path when updating a param? #14

Luksch187 · 2025-01-13T14:16:42Z

Luksch187
Jan 13, 2025

When updating a param via the helpers.update() method it changes the path

Example:

onValueChange={() => { helpers.update({ sort_by: price, }); }}

The url switches from /market to the root /?sort_by=price
I want to stay on the /market path, so I get /market/?sort_by=price.
How do I achieve this?

I am using sveltekit, here's my code:

lib/hooks/market.ts:

import { z } from "zod";
import { createUseQueryParams } from "svelte-query-params";
import { sveltekit } from "svelte-query-params/adapters/sveltekit";

export type MarketQueryParams = z.infer<typeof MarketQueryParams>;
const MarketQueryParams = z.object({
    name: z.string().optional(),
    price_min: z.number().optional(),
    price_max: z.number().optional(),
    sort_by: z.string().optional(),
    sort_direction: z.string().optional(),
});

export const useMarketQueryParams = createUseQueryParams(MarketQueryParams, {
    adapter: sveltekit(),
});

component:

<script lang="ts">
    import { page } from '$app/state';
    import { useMarketQueryParams } from "@/hooks/market.ts";

const [params, helpers] = useMarketQueryParams(page.url);

</script>

<Select.Root
            type="single"
            bind:value={filterManager.sortByFilter.sort_by.selected}
            onValueChange={() => {
                helpers.update({
                    sort_by: filterManager.sortByFilter.sort_by.selected,
                });
            }}
        >
</Select.Root>

What am I doing wrong? Thanks for any help

Answered by Luksch187

Jan 14, 2025

I found it, crazy annoying:

I had this in my app.html:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<base href="/" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

and the <base href="/" /> is what caused it.

View full answer

Ernxst · 2025-01-13T18:29:27Z

Ernxst
Jan 13, 2025
Maintainer

Do you have a full minimal example (yours is missing <Select.Root> and filterManager)? Not sure why you need an intermediate filterManager anyways, is using the first value returned from useMarketQueryParams not enough?

0 replies

Luksch187 · 2025-01-14T16:48:26Z

Luksch187
Jan 14, 2025
Author

I am trying to reproduce the behaviour on a fresh svelte repo, but somehow it works with the exact same code. Must be something external. I guess you can close this.

Thanks for answering though

0 replies

Luksch187 · 2025-01-14T17:17:25Z

Luksch187
Jan 14, 2025
Author

I found it, crazy annoying:

I had this in my app.html:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<base href="/" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

and the <base href="/" /> is what caused it.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to perserve the path when updating a param? #14

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to perserve the path when updating a param? #14

Uh oh!

Uh oh!

Luksch187 Jan 13, 2025

Replies: 3 comments

Uh oh!

Ernxst Jan 13, 2025 Maintainer

Uh oh!

Luksch187 Jan 14, 2025 Author

Uh oh!

Uh oh!

Luksch187 Jan 14, 2025 Author

Luksch187
Jan 13, 2025

Ernxst
Jan 13, 2025
Maintainer

Luksch187
Jan 14, 2025
Author

Luksch187
Jan 14, 2025
Author