我正在尝试用sveltekit用headless wordpress建一个博客。我一直在关注this app,但我认为它已经过时了。
我想我找到了路由,但是在我的博客页面上,我一直没有找到任何帖子,尽管我的本地WordPress安装上有几篇帖子。我还使用WPGraphQL接口来确保查询正在提取数据。
+page.js
const query = `
query getPosts {
posts {
nodes {
databaseId
uri
title
excerpt
date
featuredImage {
node {
sourceUrl
altText
mediaDetails {
width
height
}
}
}
}
}
}`;
export async function load({ fetch }) {
const response = await fetch(import.meta.env.VITE_PUBLIC_WORDPRESS_API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}, body: JSON.stringify({ query }),
});
if (response.ok) {
const responseObj = await response.json();
const posts = responseObj.data.posts.nodes;
return {
props: {
posts
}
};
}
return {
status: response.status, error: new Error(`Could not load ${url}`)
};
}
+页面.svelte
<script>
export let posts;
</script>
<h1>Blog</h1>
{#if posts}
<ul>
{#each posts as post}
<li>
{post.title}
</li>
{/each}
</ul>
{:else}
<p>No posts found.</p>
{/if}
<style>
ul {
list-style: none;
padding: 0;
}
ul li + li {
margin-top: 2rem;
}
</style>
我在这方面真的是新手,我不完全确定我做错了什么。
1条答案
按热度按时间bvn4nwqk1#
数据传输的方式是关闭的。它应该是
return { posts }
,在页面中,来自load
函数的所有数据都在一个名为data
的属性中传递。所以post应该在data.posts
中。(For错误应该
throw
一个错误对象,它是用@sveltejs/kit
中的error
函数构造的,以显示+error.svelte
页面。)