CODEWITHSUNDEEP
javascriptroutessveltesveltekitquery-string
MrCujo
MrCujo

Reputation: 1323

Sveltekit not able to retrieve URL query params

I've got a page (routes/customers/+page.svelte) in which I've got two buttons:

<div class="float-right block p-5">
    <button on:click={() => addNewCustomer("individual")} class="btn btn-sm bg-primary btn-outline">+ Individual</button>
</div>
<div class="float-right block p-5">
    <a href="#" on:click={() => addNewCustomer("business")} class="btn btn-sm bg-primary btn-outline">+ Business</a>
</div>

As you can see these buttons invoke addNewCustomer:

const addNewCustomer = customerType => {
    goto(`/customers/tmp&type=${customerType}`)
}

I also have customers/tmp/+page.svelte, and in the same location I've got +page.js.

In +page.js I just want to capture type passed in the URL:

import { page } from '$app/stores';

export async function load({params}) {
    const tmp = $page.url.searchParams.get('type');
   
    console.log(params)
    console.log(tmp)
}

but this doesn't seem to work. I'm getting and error:

404
Not found: /customers/tmp&type=business
Error: Not found: /customers/tmp&type=business
    at resolve (file:///ifflin-ui/node_modules/@sveltejs/kit/src/runtime/server/index.js:322:13)
    at Object.handle (file:///flin-ui/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:318:66)
    at respond (file:///ifflin-ui/node_modules/@sveltejs/kit/src/runtime/server/index.js:341:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///ifflin-ui/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:376:22

If I get rid of the query in the url (/customers/tmp) my page loads correctly. What am I missing?

Update

As it was mentioned I should be using /customers/tmp?type=${customerType} instead of /customers/tmp&type=${customerType} (notice the use of ? instead of &, don't know how I missed that detail) yet after updating I still get the following error:

500
Cannot read properties of undefined (reading 'get')
TypeError: Cannot read properties of undefined (reading 'get')
    at load (/src/routes/customers/tmp/+page.js:4:26)
    at load_data (file:///Users/hansgruber/Desktop/webdev/projects/dundermifflin-ui/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:109:38)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/hansgruber/Desktop/webdev/projects/dundermifflin-ui/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:203:13

seems to be related to get: const tmp = page.url.get('type'); I've tried the following as well const tmp2 = page.url.searchParams.get('type'); but still getting an error

Upvotes: 1

Views: 3925

Answers (2)

brunnerh
brunnerh

Reputation: 184376

The URL seems just wrong, hence the 404

/customers/tmp&type=business
vs
/customers/tmp?type=business

Also, in a JS file you cannot access stores via $ (which is a Svelte-specific auto-subscription syntax) and load can also run on the server, where you cannot access the page store at all.

If you need the URL in the load function, you can get it via the function argument:

export async function load({ url }) {
    const type = url.searchParams.get('type');
}

Upvotes: 2

MrCujo
MrCujo

Reputation: 1323

Thanks @H.B. for pointing out one of my mistakes. After addressing the suggested change I still couldn't access the query param. I had to get rid of the /tmp/+page.js file since for some reason I still don't know, I couldn't access the $page store from there, instead I decided to use the onMount method in my main page and get the params from there, this worked:

File customers/tmp/+page.svelte:

onMount(() => {
        console.log("here on mount...")
        console.log($page.url.searchParams.get('type'))
    })

Upvotes: 0

Related Questions