如何在SvelteKit中展示Appwrite数据库返回的数据？

我正在运行一个基于Appwrite和SvelteKit的应用，这是我首次使用这两项技术。已完成Appwrite SDK配置，成功连接数据库，且能在控制台看到API返回的数据。

现在想在页面展示这些数据，但不清楚问题所在。找到的资料多针对REST API数据消费，缺少Appwrite相关展示指引。

初始代码：

<script>
import { Client, Databases } from "appwrite";

const client = new Client();
const databases = new Databases(client);

client
    .setEndpoint('http://localhost/v1') // 你的API端点
    .setProject('63d89956ac3d018e22ff') // 你的项目ID
;

const promise = databases.listDocuments('63d89aba02f41e8c4003', '63d89ad33cb270e9c8c1');

promise.then(function (response) {
    console.log(response); // 成功
   
}, function (error) {
    console.log(error); // 失败
});
let appdata = promise;
</script>

{#each appdata.documents as front}<p>{front.content}</p>{/each}
<div class="hero min-h-screen" style="background-image: url(../src/images/header_front.png);">
    <div class="hero-overlay bg-opacity-60"></div>
    <div class="hero-content text-center text-neutral-content">
      <div class="max-w-md">
        <h1 class="mb-5 text-5xl font-bold prose">Welcome to Nafuna!</h1>
        <p class="mb-5 prose">

我知道Svelte的数据展示逻辑存在疏漏，请求协助！曾尝试将const变量改为let（了解到Svelte通常展示let变量数据），但无效。

编辑：按建议添加了return语句，仍无法展示数据，更新后的代码：

<script lang="ts">
import { Client, Databases } from "appwrite";

const client = new Client();
const databases = new Databases(client);

client
    .setEndpoint('http://localhost/v1') // 你的API端点
    .setProject('63d89956ac3d018e22ff') // 你的项目ID
;

const promise = databases.listDocuments('63d89aba02f41e8c4003', '63d89ad33cb270e9c8c1');

promise.then(function (response) {
    console.log(response); // 成功
    return response;
   
}, function (error) {
    console.log(error); // 失败
    throw error;
});

// let appdata;
// appdata = response;
</script>

{#each appdata as front}<p>{front.documents.content}</p>{/each}

核心问题是没正确处理异步Promise的数据更新，Svelte无法直接追踪Promise对象的状态变化，需要把数据赋值给响应式变量，并在Promise回调中更新它。

正确代码实现 #

<script lang="ts">
import { Client, Databases } from "appwrite";

// 初始化Appwrite客户端
const client = new Client()
    .setEndpoint('http://localhost/v1')
    .setProject('63d89956ac3d018e22ff');

const databases = new Databases(client);

// 声明响应式变量，初始化空数组避免初始渲染报错
let appdata = { documents: [] };

// 异步获取数据并更新响应式变量
async function fetchData() {
    try {
        const response = await databases.listDocuments('63d89aba02f41e8c4003', '63d89ad33cb270e9c8c1');
        appdata = response; // 更新变量触发Svelte重新渲染
        console.log(response);
    } catch (error) {
        console.error(error);
    }
}

// 组件加载时调用数据获取函数
fetchData();
</script>

<!-- 遍历documents数组展示内容 -->
{#each appdata.documents as front}
    <p>{front.content}</p>
{/each}

<div class="hero min-h-screen" style="background-image: url(../src/images/header_front.png);">
    <div class="hero-overlay bg-opacity-60"></div>
    <div class="hero-content text-center text-neutral-content">
        <div class="max-w-md">
            <h1 class="mb-5 text-5xl font-bold prose">Welcome to Nafuna!</h1>
            <p class="mb-5 prose">
                <!-- 补充你的其他内容 -->
            </p>
        </div>
    </div>
</div>

关键修复点 #

• 用async/await替代Promise链式调用，代码更简洁易读
• 声明响应式变量appdata并设置默认值，保证初始渲染不报错
• 异步获取数据后直接赋值给appdata，Svelte会自动检测变化更新DOM
• 组件加载时主动调用数据获取函数，确保页面加载时发起请求

额外提示 #

• 如果用SvelteKit的服务器端渲染（SSR），建议把数据获取逻辑放在load函数中，避免客户端重复请求
• 确认Appwrite的权限设置正确，允许当前用户读取目标集合的文档

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