Svelte+Prisma项目无法读取模型特定字段的问题解决

问题描述 #

开发CRUD应用时，编辑文章功能出现异常：提交表单能成功更新数据库中的文章，但编辑页面无法渲染文章的title和content，控制台输出显示这两个字段为undefined。主页展示所有文章的功能正常。

相关代码 #

+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,
        }
    }
};

+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>

问题原因与解决方法 #

问题根源在于+page.server.ts的load函数中，返回article时未对异步函数getArticle()添加await。此时返回的article是一个Promise对象，而非实际的文章数据，因此页面中访问article.title和article.content会得到undefined。

旧版SvelteKit会自动解析load函数返回的Promise，但新版本需要显式使用await来获取异步函数的执行结果。

修改后的load函数：

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: await getArticle(), // 添加await获取实际数据
    }
}

内容的提问来源于stack exchange，提问作者Nearvey