无头的WordPress博客与苗条的不拉帖子

lsmepo6l  于 2022-12-11  发布在  WordPress
关注(0)|答案(1)|浏览(206)

我正在尝试用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>

我在这方面真的是新手,我不完全确定我做错了什么。

bvn4nwqk

bvn4nwqk1#

数据传输的方式是关闭的。它应该是return { posts },在页面中,来自load函数的所有数据都在一个名为data的属性中传递。所以post应该在data.posts中。
(For错误应该throw一个错误对象,它是用@sveltejs/kit中的error函数构造的,以显示+error.svelte页面。)

相关问题