Por que +page.svelte não é recarregado depois que +page.server.ts executa a função de carregamento?

Bom dia/noite! Já estou nisso há alguns dias, movimentando peças para tentar isolar e resolver o problema. Agradeço qualquer informação que você possa fornecer aqui.

Aqui está a ordem do que está acontecendo:

1. +page.server.ts: O carregamento inicial funciona conforme o esperado
2. +page.svelte: data:PageDataestá preenchido corretamente
3. +page.server.ts: Actionexecuta e funciona conforme o esperado
4. +page.server.ts: carrega novamente com os novos dados
5. +page.svelte: não recarrega de jeito nenhum

Aqui está o que eu esperava:

- +page.sveltepara recarregar porque page.server.tsretornou novos dados

Análise:

- A princípio pensei que talvez hooks.server.tsestivesse causando problemas, então removi as funções e o problema ainda persistia.

- Não parece haver necessidade de invalidatenada porque o formulário updateestá funcionando e page.server.tsrecarregando conforme o esperado.

+página.server.ts:

// src/routes/admin/manage-roles/+page.server.ts

// (...) import statements all working: db, schemas, types, etc...

export const load: PageServerLoad = async ({ locals }) => {
    try {
        const allRoles = await db.select().from(roles)
        return {
            allRoles
        };
    } catch (error) {
        console.error("Error fetching roles:", error);
        return fail(500, { error: error.message });
    }
};

export const actions: Actions = {
    new: async ({ request }) => {
        const form = await superValidate(request, roleSchema);
        if (!form.valid) {
            return fail(400, {
                form
            });
        }
        try {
            const id = uuidv4();
            const result = await db.insert(roles).values({
                id,
                name: form?.data?.name
            });
        } catch (error) {
            console.error("Error creating role:", error);
            return fail(500, { error: error.message });
        }

        return { success: true };
    }
};

+página.svelte:

<script lang="ts">

// (...) import statements all working: db, schemas, components, etc...

    export let data: PageData;

    const { allRoles } = data;
    const roleStore = writable(allRoles);

    console.log("allRoles?", allRoles);

    const isNewDialogOpen = writable(false);
    const isSubmittingForm = writable(false);

    const table = createTable(roleStore, {
        sort: addSortBy({ disableMultiSort: true }),
        page: addPagination(),
        filter: addTableFilter({
            fn: ({ filterValue, value }) => value.includes(filterValue)
        }),
        select: addSelectedRows(),
        hide: addHiddenColumns()
    });

// (...) custom table control events, etc... all working.

</script>

<!-- New Role Dialog -->
<Dialog
    isOpen={$isNewDialogOpen}
    onOpenChange={(open) => {
        $isNewDialogOpen = open;
    }}
    title="New Role"
    description="Add a new role to assign to users.">
    <div slot="body">
        <Form
            action="?/new"
            onBeforeSubmit={() => ($isSubmittingForm = true)}
            on:successAfterUpdate={async () => {
                $isSubmittingForm = false;
                $isNewDialogOpen = false;
            }}>
            <div class="grid gap-2">
                <div class="grid gap-1">
                    <Label class="sr-only" for="name">Role Name</Label>
                    <Input id="name" name="name" placeholder="Admin" required />
                </div>
                <div class="flex w-full justify-end">
                    <Button type="submit" class="w-32" disabled={$isSubmittingForm}>Create Role</Button>
                </div>
            </div>
        </Form>
    </div>
    <div slot="footer" />
</Dialog>

<!-- Roles -->
<div class="flex flex-col px-10">
    <div class="flex-1 mb-6">
        <div class="flex items-center justify-between mb-2">
            <h2 class="text-2xl font-bold tracking-tight mb-4">
                <Users class="header-icon" />Manage Roles
            </h2>
            <div class="flex items-center space-x-2">
                <Button size="sm" on:click={() => ($isNewDialogOpen = true)}>
                    <Plus class="mr-2 h-4 w-4" />
                    New
                </Button>
            </div>
        </div>
        <ManageNav active="roles" />
    </div>

<!-- (...) The rest of the table/UI -->

ganchos.server.ts:

import { auth } from "$lib/server/lucia";
import type { Handle, HandleServerError } from "@sveltejs/kit";

export const handleError: HandleServerError = async ({ error, event }) => {
    const errorId = crypto.randomUUID();
    event.locals.error = error?.toString() || undefined;
    event.locals.errorStackTrace = error?.stack || undefined;
    event.locals.errorId = errorId;
    console.error(`Error ID: ${errorId}`, error)

    return {
        message: "An unexpected error occurred.",
        errorId
    };
};

export const handle: Handle = async ({ event, resolve }) => {
    event.locals.auth = auth.handleRequest(event)
    return await resolve(event)
};

Obrigado por reservar um tempo para considerar meu cenário. Imagino que todos os esforços coletivos aqui serão benéficos para aqueles que estão neste cenário/conversando com uma IA no futuro.

Desejo a todos um dia maravilhoso. Saúde!

🎩🌹⚡️✨

Resolução e atualização:

Aprendi que tudo que depende datatem que ser reativo e agora as coisas estão funcionando maravilhosamente bem. (veja a resposta abaixo).

export let data: PageData;
const roleStore = writable([]);

$: if (data?.allRoles) roleStore.set(data.allRoles);