Svelte+Prisma Cannot use specific field of the model

Question

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, don'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.

Edit

ChatGPT after several attempts gave me an answer for that problem (yesterday answers were incorrect). The only reason was missing await before getArticle () in the +page.server.ts I checked 2 times if i was that dumb but in that YouTube video and linked GitHub there is no await in this place in the code and for him it is still working. I don't know if something changed in svelte, because that video was published over a year ago but for me it solve the problem. Maybe it will be helpful for someone :)

Answer 1

It might be the sveltekit version. One of the breaking changes between SvelteKit 1 and 2 is that 1 would automatically await top level promises in the object returned by load(). SvelteKit 2 stopped doing this so that you didn't need an extra promise in order to stream the data.

Top-level promises are no longer awaited

EDIT: That video predates the SvelteKit 2 release, so this suspicion just went from maybe to probably in my mind.