sveltekit-url-store

A simple zod-based url store for SvelteKit.

Shared Schema

It is possible to share the schema between the frontend and the backend. We do this by creating a schema.ts file.

import { queryStringArray } from "@/utils/url";
import { z } from "zod";

export const schema = z.object({
  filter: z.string().optional(),
  company_ids: queryStringArray.optional()
});

Server side

import type { PageServerLoad } from './$types';
import { typedParams } from 'sveltekit-url-store';

export const load = (async ({ locals, url }) => {
    const { data } = typedParams(url.searchParams, schema);
}) satisfies PageServerLoad;

Client side

<script lang="ts">
    import { schema } from './query-params-schema';
    import { createURLStore } from 'sveltekit-url-store';

    let urlParams = createURLStore($page.url.searchParams, schema);

    // set as it updates
    $: urlParams.setFrom($page.url.searchParams);

    // subscribe to all changes to the url params and update the url
    urlParams.url.subscribe((newURL) => {
        if (browser) goto(`?${newURL}`);
    });
</script>