How to invalidate data within a shallow route modal

[IcelandicIcecream]

Describe the bug

I'm currently loading a page in a modal using shallow routing. I have a button that invalidates the data within that rendered page. The invalidation works fine within that page itself but when I use it within a modal via pushState, the invalidation doesn't get triggered. How does invalidation work for shallow routing? I'm not too sure how to go about this.

Reproduction

Here is my +page.server.ts for the page being rendered.

export const load: PageServerLoad = async ({ params, depends }) => {
	const bankTransactionId: string = params.id;

	const getBankTransactionDetails = async () => {
		const { payload } = await getLinkedTransactionsByBankId(orgId, bankTransactionId);
		return payload as BankTransactionDetailsResponse;
	};

	depends('bankTransactionDetails');

	return {
		orgId: orgId,
		bankTransactionId: bankTransactionId,
		bankTransactionDetails: await getBankTransactionDetails()
	};
};

Within the page itself, i have a button that invalidates the data:

	const handleConfirmMatch = async () => {
		try {
			confirmMatchButtonProps.disabled = true;
			await confirmReconciliation(orgId, clickedTransactionLinkId);
			notificationProps.notificationMessage = 'Match confirmed';
			notificationProps.notificationTitle = 'Success';
			invalidate('bankTransactionDetails');
		} catch (error: any) {
			notificationProps.notificationMessage = error.message;
			notificationProps.notificationTitle = 'Error';
		} finally {
			confirmMatchButtonProps.disabled = false;
		}
	};

Logs

No response

System Info

System:
    OS: Linux 6.5 Nobara Linux 38 (Thirty Eight)
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 5.12 GB / 14.95 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 18.18.2 - /usr/bin/node
    npm: 10.2.5 - /usr/local/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.58
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.1 
    @sveltejs/adapter-node: ^5.0.1 => 5.0.1 
    @sveltejs/kit: ^2.0.0 => 2.5.2 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2 
    svelte: ^5.0.0-next.1 => 5.0.0-next.69 
    vite: ^5.0.3 => 5.1.4

Severity

annoyance

Additional Information

No response

[eltigerchino]

I think you have to invalidate then call preloadData to fetch the data again for the modal.

[eltigerchino]

// get the result of the `load` functions
const result = await preloadData("/my-page");

if (result.type === 'loaded' && result.status === 200) {
	// use result.data
} else {
	// something bad happened! try navigating
	goto(href);
}

https://kit.svelte.dev/docs/shallow-routing#loading-data-for-a-route

[IcelandicIcecream]

Thanks for this! but this doesn't really answer my question. I'm looking for a way to run the preload function from the page itself. like for example, pressing a button and running a post request in the page modal for example should run preload data again.

Im thinking of whether using a store would help, to manage the states

[eltigerchino]

You should enhance the modal form and customise it to refresh your modal state with the result of preloadData after submitting the form.
https://kit.svelte.dev/docs/form-actions#progressive-enhancement-customising-use-enhance

[IcelandicIcecream]

Sorry I think I didn't explain it properly, but my modal form is within another page. so I'm not too sure how to implement the enhancement in a cross page setting.

page1/+page.svelte:

<Modal>
<Page2 data={preloadedData}/> <--- the actions happen within the page itself in (page2/+page.svelte)
</Modal>

page2/+page.svelte:

// how do i trigger an invalidate + preload data for page1 from this separate page that's imported as a modal
{preloadedData}
<Button/>

[eltigerchino]

I've prepared an example here of a page that preloads the data of another page, opens a modal, and has a button that invalidates the data of the other page. Let me know if this helps!
https://stackblitz.com/edit/sveltejs-kit-template-default-f8iodl?file=src%2Froutes%2F%2Bpage.svelte