在 Sveltekit 应用程序中从 Mailchimp 获取数据时遇到问题

Question

我已经成功连接到Mailchimp API，但我不明白为什么数据不想显示在页面上。

我这两天一直在讨论这个问题。 API 密钥有效，并且 Mailchimp NPM 包是最新的。

在 +page.svelte 页面上，控制台中没有显示任何数据，因此由于某种原因，无法通过该组件访问异步加载功能，我不知道为什么。

这两个文件都位于名为 API 的文件夹中

路线 > API > +page.server.js 和 +page.svelte

这是我的+page.server.js代码

import mailchimp from '@mailchimp/mailchimp_marketing';

const apiKey = import.meta.env.VITE_MAILCHIMP_API_KEY;

if (!apiKey) {
  throw new Error('API key is not defined. Please check your .env file.');
}

const serverPrefix = apiKey.split('-')[1];
mailchimp.setConfig({
  apiKey: apiKey,
  server: serverPrefix,
});

export async function load() {
  try {
    const campaignsResponse = await mailchimp.campaigns.list({ count: 10 });
    console.log('Campaigns Response:', campaignsResponse);

    const campaigns = campaignsResponse.campaigns || [];
    const campaignData = [];

    for (const campaign of campaigns) {
      const campaignReportResponse = await mailchimp.reports.get(campaign.id);
      const reports = campaignReportResponse;

      const reportData = {
        send_time: campaign.send_time,
        campaign_id: campaign.id,
        campaign_title: campaign.settings.title,
        subject_line: campaign.settings.subject_line,
        emails_sent: reports.emails_sent || 0,
        abuse_reports: reports.abuse_reports || 0,
        unsubscribed: reports.unsubscribed || 0,
        unsubscribe_rate: reports.emails_sent ? (reports.unsubscribed / reports.emails_sent) : 0,
        hard_bounces: reports.bounces?.hard_bounces || 0,
        soft_bounces: reports.bounces?.soft_bounces || 0,
        bounces: (reports.bounces?.hard_bounces || 0) + (reports.bounces?.soft_bounces || 0),
        syntax_errors: reports.bounces?.syntax_errors || 0,
        forwards_count: reports.forwards?.forwards_count || 0,
        forwards_opens: reports.forwards?.forwards_opens || 0,
        opens_total: reports.opens?.opens_total || 0,
        unique_opens: reports.opens?.unique_opens || 0,
        open_rate: reports.opens?.open_rate || 0,
        last_open: reports.opens?.last_open || null,
        clicks_total: reports.clicks?.clicks_total || 0,
        unique_clicks: reports.clicks?.unique_clicks || 0,
        unique_subscriber_clicks: reports.clicks?.unique_subscriber_clicks || 0,
        click_rate: reports.clicks?.click_rate || 0,
      };

      campaignData.push(reportData);
    }

    console.log('Formatted Campaign Data:', campaignData);

    return {
      props: {
        campaigns: campaignData,
      },
    };
  } catch (error) {
    console.error('Error fetching Mailchimp data:', error.response ? error.response.body : error.message);
    
    return {
      props: {
        campaigns: [],
      },
    };
  }
}

+页面.svelte

<script>
    export let campaigns = [];
    console.log(campaigns); 
</script>

{#if campaigns.length > 0}
    {#each campaigns as campaign}
        <div class="campaign">
            <h2>{campaign.campaign_title}</h2>
            <p><strong>Subject Line:</strong> {campaign.subject_line}</p>
            <p><strong>Sent Time:</strong> {new Date(campaign.send_time).toLocaleString()}</p>
            <p><strong>Emails Sent:</strong> {campaign.emails_sent}</p>
            <p><strong>Abuse Reports:</strong> {campaign.abuse_reports}</p>
            <p><strong>Unsubscribed:</strong> {campaign.unsubscribed}</p>
            <p><strong>Unsubscribe Rate:</strong> {(campaign.unsubscribe_rate * 100).toFixed(2)}%</p>
            <p><strong>Hard Bounces:</strong> {campaign.hard_bounces}</p>
            <p><strong>Soft Bounces:</strong> {campaign.soft_bounces}</p>
            <p><strong>Total Bounces:</strong> {campaign.bounces}</p>
            <p><strong>Syntax Errors:</strong> {campaign.syntax_errors}</p>
            <p><strong>Forwards Count:</strong> {campaign.forwards_count}</p>
            <p><strong>Forwards Opens:</strong> {campaign.forwards_opens}</p>
            <p><strong>Opens Total:</strong> {campaign.opens_total}</p>
            <p><strong>Unique Opens:</strong> {campaign.unique_opens}</p>
            <p><strong>Open Rate:</strong> {(campaign.open_rate * 100).toFixed(2)}%</p>
            <p><strong>Last Open:</strong> {campaign.last_open ? new Date(campaign.last_open).toLocaleString() : 'N/A'}</p>
            <p><strong>Clicks Total:</strong> {campaign.clicks_total}</p>
            <p><strong>Unique Clicks:</strong> {campaign.unique_clicks}</p>
            <p><strong>Unique Subscriber Clicks:</strong> {campaign.unique_subscriber_clicks}</p>
            <p><strong>Click Rate:</strong> {(campaign.click_rate * 100).toFixed(2)}%</p>
            <a href={campaign.archive_url} target="_blank">View Campaign</a>
        </div>
    {/each}
{:else}
    <p>No campaigns found.</p>
{/if}

Answer 1

这（仍然）不是当前 SvelteKit 版本中数据加载的工作方式，请阅读文档。

返回的对象不需要

props

包装器，发送的内容最终会出现在

data

中的

+page.svelte

属性中。