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.
EditChatGPT after several attempts gave me an answear for that problem (yesterday answears were incorrect). The only reason was missing await before getArticle () in the +page.server.tsI 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 helpfull for someone :)