Following the basic page data loading here is the thing. I'm not really familiar with runes, but $props are not reactive? so I can't do simple reactive just to check any changes like $: console.log(data).

Then, I want to make a button to load more posts from the database and run the function in the backend +page.server.js

// +page.server.js
import * as db from '$lib/server/database';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
    return {
        post: await db.getPost(params.slug)
    };
}

// I add this default POST action (because I don't know how to do with GET)
/** @satisfies {import('./$types').Actions} */
export const actions = {
    default: async (event) => {
        // I can do the console.log here,
        // I also can get the data from database here
        // but I can't return the data to the front-end and update the $props()
    }
};

<!-- +page.svelte -->
<script>
    /** @type {import('./$types').PageProps} */
    let { data } = $props();
</script>

<form method="POST">
    <button type="submit">Load more...</button>
</form>

I can fetch the data from the database inside the default action, but I can't return the data to the front end and update the data.

Following the basic page data loading here is the thing. I'm not really familiar with runes, but $props are not reactive? so I can't do simple reactive just to check any changes like $: console.log(data).

Then, I want to make a button to load more posts from the database and run the function in the backend +page.server.js

// +page.server.js
import * as db from '$lib/server/database';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
    return {
        post: await db.getPost(params.slug)
    };
}

// I add this default POST action (because I don't know how to do with GET)
/** @satisfies {import('./$types').Actions} */
export const actions = {
    default: async (event) => {
        // I can do the console.log here,
        // I also can get the data from database here
        // but I can't return the data to the front-end and update the $props()
    }
};

<!-- +page.svelte -->
<script>
    /** @type {import('./$types').PageProps} */
    let { data } = $props();
</script>

<form method="POST">
    <button type="submit">Load more...</button>
</form>

I can fetch the data from the database inside the default action, but I can't return the data to the front end and update the data.

• svelte
• sveltekit
• svelte-runes

• svelte.dev/docs/kit/$app-navigation#invalidate – Jonathan Commented Mar 14 at 19:42

1 Answer 1

Form actions can return data, which will be provided in the form property. This property then could be reactively combined with data via $derived.

You also can re-run load functions via invalidateAll, but there the question would be how you can determine that you need more data. In some cases it may make sense to use a query parameter with goto instead. But here you would want to just load the next n items, so using a form action with enhance might make sense (you can send a dynamic offset via the form data).