SvelteKit - api response data (PageData) not updated after initial render

Issue

am new to svelte and svelteKit in general and am trying to load data from api and I followed the sveltekit todo sample code. It's working well for initial rendering and a tag onClick but in div on:click am updating url parameters api getting called and returns data but PageData object not updating.

Here I have attached my onClick

import { goto } from '$app/navigation'; 
const adhigaramClick = (adhigaram: string) => {
        selectedAdhigaram = adhigaram
        $page.url.searchParams.set('adhigaram',adhigaram); 
        goto(`?${$page.url.searchParams.toString()}`);
    }

Here I have attached the api call (+page.server.ts)

    export const load: PageServerLoad = async ({url, params}) => {
    let selectedPaal = "test;

    const paramPaal =url.searchParams.get("paal")
    const adhigaram =url.searchParams.get("adhigaram")

        if (paramPaal) {
            selectedPaal = paramPaal;
        }
        
    const response = await api('GET', `page/${selectedPaal}${adhigaram?`/${adhigaram}` : ''}`);
    
    if (response.status === 404) {
        return {
            data: {}  as Page
        };
    }

    if (response.status === 200) {  
        return {
            ... (await response.json()) as Data
        };
    }
    throw error(response.status);
};

+page.svelte.ts file to get the response data(PageData)

import type { PageData } from './$types';

    export let data: PageData;
    $: console.log(data);

a tag click is working fine page re rendering

<a href={`?paal=${paal.keyword}`} >
    {paal.titleTamil}
</a>

Solution

Invalidation is probably what you need.

SvelteKit tracks the dependencies of each load function to avoid re-running it unnecessarily during navigation. For example, a load function in a root +layout.js doesn't need to re-run when you navigate from one page to another unless it references url or a member of params that changed since the last navigation.

A load function will re-run in the following situations:

• It references a property of params whose value has changed
• It references a property of url (such as url.pathname or url.search) whose value has changed
• It calls await parent() and a parent load function re-ran
• It declared a dependency on a specific URL via fetch or depends, and that URL was marked invalid with invalidate(url)
• All active load functions were forcibly re-run with invalidate()

If a load function is triggered to re-run, the page will not remount — instead, it will update with the new data. This means that components' internal state is preserved. If this isn't want you want, you can reset whatever you need to reset inside an afterNavigate callback, and/or wrap your component in a {#key ...} block.

https://kit.svelte.dev/docs/load#invalidation

Answered By - FlippingBinary