Invalidate only part of +page.server.js data

[H14]

I wonder if it is possible to invalidate only part of the data.

My +page.server.js load() returns props that come from multiple function/database calls.

/** @type {import('./$types').PageServerLoad}} */
export async function load({ params }) {
	try {
	return {
			one: await one(params.id),
			two: await two(params.id),
			three: await three(params.id),
			four: await four(params.id),
		};
	} catch (error) {
		throw error(404, error);
	}
}

If I use a progressive enhanced form to do an operation that only impacts data.three, either way the entire dataset will be invalidated. This is quite resource heavy in my case.

Is there a way to have only data.three invalidated?

[david-plugge]

Do you want the others (one, two, four) to never update? That would be possible i guess.

I think there´s a discussion about adding something like invalidated that you can use to determine what actually caused the invalidation.
Not sure how it would look like though.

[H14]

In turn, the other functions should also be able to be invalidated.

To make the example more concrete, I am building a page that presents several different editable lists.

• one: information about the page from the database (e.g. title, description, ...)
• two: list of related pages
• three: a list of entries
• four: another type of list of entries

The page is editable with inline forms, allowing each of the above entries to be customized by the user. But so adding an entry to three triggers a refresh of all four functions (and their underlying database calls). User-centric this is not a big deal (they only see changes to what was effectively changed anyway), but it creates unnecessary server load and network traffic.

[david-plugge]

Got it.

If we would be able to export an array of load functions per page this would be possible.

You call invalidate('data:my-page-data-two') and only the second load function reruns.

export const load: PageLoad[] = [
	async ({ depends, params }) => {
		depends('data:my-page-data-one');
		return {
			one: await one(params.id),
		}
	},
	async ({ depends, params }) => {
		depends('data:my-page-data-two');
		return {
			two: await two(params.id),
		}
	},
	...
]

[H14]

So it's not possible at the moment? I can't imagine I'm working on an edge case, so many applications present multiple editable resources on the same page. Would nesting multiple layouts work? Feels wrong, but I can be mistaken.

[david-plugge]

So it's not possible at the moment? I can't imagine I'm working on an edge case

It seems like it´s not. I agree with you, we need a way to determine the reason for an invalidation.

Would nesting multiple layouts work?

Yeah I think that would work, but it´s not clean at all

[H14]

Layouts don't have actions as well, so that would be very messy very quickly.