I am trying to make CRUD app to learn some basic. To be honest I was wallowing this guide: YouTube.
I ended up being stuck at the end trying to make “Edit Article” work. Btw It is working, when I click specific post, fill the inputs and click to update it really happens but in the “Edit Page” Title and Contentn (using article.title or article.content) is not showing up. ConsoleLog also tells it is undefined. I was trying find a reason, some missing symbol and compare the code. Maybe its stupid mistake, dont’t blame me.
Here is the code of src/routes/[articleId]/+page.svelte

<script lang="ts">
  import type { PageData } from "./$types";

  export let data: PageData;

  $: ({ article } = data);

  console.log("Fetched article:", article);
</script>

<div class="flex justify-center mt-10 flex-row">
  <form action="?/updateArticle" method="POST" class="w-1/2 flex flex-col mb-4">
    <h3 class="text-4xl text-primary mb-4">Editing: {article.title}</h3>
    <label for="title" class="text-secondary text-2xl mb-2"> Title </label>
    <input
      type="text"
      name="title"
      id="title"
      value={article.title}
      placeholder="Title of the article"
      class="input input-bordered input-secondary w-full mb-2"
    />
    <label for="content" class="text-info text-2xl mb-2"> Content </label>
    <textarea
      name="content"
      id="content"
      value={article.content}
      rows="10"
      class="resize-none textarea textarea-info placeholder:text-base mb-2"
      placeholder="Article content"
    />
    <button type="submit" class="btn btn-success">Update Article</button>
  </form>
</div>

and +page.server.ts

import type { PageServerLoad } from "./$types";
import { prisma } from '$lib/server/prisma';
import { error } from '@sveltejs/kit';
import type { Actions } from "./$types";
import { fail } from "@sveltejs/kit";

export const load: PageServerLoad = async ({ params }) => {
    const getArticle = async () => {
        const article = await prisma.article.findUnique({
            where: {
                id: Number(params.articleId),
            },
        })
        if (!article) {
            throw error(404, "Article not found")
        }
        return article
    }

    return {
        article: getArticle(),
    }
}

export const actions: Actions = {
    updateArticle: async ({ request, params }) => {
        const { title, content } = Object.fromEntries(await request.formData()) as {
            title: string;
            content: string
        }

        try {
            await prisma.article.update({
            where: {
                id: Number(params.articleId)
            },
            data: {
                title,
                content,
            },
        })
        } catch (error) {
            console.error(error)
            return fail(500, { message: 'Could not update the article' })
        }

        return {
            status: 200,
        }
    }
};

I want to pull data of specific article from database, decompose it and use specific fileds like “title” in the code.
Funny part is that it is working on main page which is showing all articles stored in database.