SvelteKit构建无头WordPress博客无法拉取文章问题

1. 修复load函数中的未定义变量错误 #

你的错误返回语句里用到了${url}，但url变量并未定义，这会导致load函数抛出未捕获错误，进而无法正确返回posts数据。修改错误处理部分：

return {
    status: response.status,
    error: new Error(`Could not load ${import.meta.env.VITE_PUBLIC_WORDPRESS_API_URL}`)
};

2. 检查GraphQL响应是否包含错误 #

即使HTTP响应状态码为200（response.ok为true），GraphQL仍可能返回errors字段（比如权限不足、字段不存在等情况）。在load函数中添加GraphQL错误处理逻辑：

if (response.ok) {
    const responseObj = await response.json();
    // 捕获GraphQL层面的错误
    if (responseObj.errors) {
        console.error('GraphQL Errors:', responseObj.errors);
        return { props: { posts: [] } };
    }
    // 用可选链避免undefined报错，默认返回空数组
    const posts = responseObj.data?.posts?.nodes || [];
    return { props: { posts } };
}

3. 验证环境变量配置 #

确认项目根目录的.env文件中，VITE_PUBLIC_WORDPRESS_API_URL是否正确指向本地WordPress的WPGraphQL端点（例如http://localhost:8000/graphql），并且修改.env后已重启SvelteKit开发服务器。

4. 解决跨域（CORS）问题 #

如果SvelteKit开发服务器（默认端口5173）和WordPress实例端口不同，WordPress会阻止跨域请求。可通过以下方式解决：

• 安装并激活WordPress的CORS管理插件
• 或者在WordPress的wp-config.php中添加以下代码：

add_action('graphql_init', function() {
    header("Access-Control-Allow-Origin: http://localhost:5173"); // 替换为你的SvelteKit地址
    header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type");
});

5. 调试load函数的返回值 #

在load函数中添加日志，查看实际获取到的数据：

console.log('GraphQL Response:', responseObj);
console.log('Posts Data:', responseObj.data?.posts?.nodes);

启动开发服务器后，在终端查看这些日志，确认posts是undefined、空数组还是有效数据。

6. 调整Svelte模板的判断逻辑 #

空数组在Svelte的{#if}中会被视为真值，因此如果posts是空数组，模板会显示空的<ul>而非“No Posts Found”。若想在posts为空时显示提示，修改判断条件：

{#if posts.length > 0}
    <ul>
        {#each posts as post}
            <li>{post.title}</li>
        {/each}
    </ul>
{:else}
    <p>No posts found.</p>
{/if}

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