wordpress 使用graphQl Next.js在headless wp中获取未定义的帖子

jhiyze9q 于 9个月前发布在 WordPress

关注(0)|答案(1)|浏览(81)

graphQL查询正在运行http://trialtest1.local/graphql?query={%20posts%20{%20nodes%20{%20slug%20title%20}%20}}

但是当我在next.js中请求posts时，它显示undefined。有人能看出我做错了什么吗？

import Link from 'next/link'

export default function Home( {posts}){
console.log({posts})
  return(
    <div>
      <h1>Hello From The Home Page!</h1>
      {
        posts?.nodes?.map(post => {
          return(
            <ul key={post.slug}>
              <li>
                <Link href={`/posts/${post.slug}`}>{post.title}</Link>
              </li>
            </ul>
          )
        })
      }
    </div>
  )

}

export async function getInitialProps(){

  const res = await fetch('http://trialtest1.local/graphql', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
          query: `
          query HomePageQuery {
            posts {
              nodes {
                slug
                title
              }
            }
          }
          `,
      })
  })

  const json = await res.json()

  return {
    props: {
        posts: json.data.posts,
    },
  }

}

wordpress

来源：https://stackoverflow.com/questions/77193030/getting-posts-undefined-in-headless-wp-with-graphql-next-js

1条答案

按热度按时间

3qpi33ja1#

在你的Next.js应用程序中，这个问题可能与你如何访问GraphQL响应数据有关。当使用'getInitialProps'时，GraphQL响应通常在'data'对象中。下面是对代码的修改，以正确访问帖子：

export async function getInitialProps() {
  const res = await fetch('http://trialtest1.local/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `
        query HomePageQuery {
          posts {
            nodes {
              slug
              title
            }
          }
        }
      `,
    }),
  });

  const json = await res.json();

  return {
    props: {
      posts: json.data.posts.nodes, // Access nodes directly
    },
  };
}

在组件中，“posts”现在应该包含post对象数组。确保您正在使用"posts.nodes.map“访问”Home“组件中的正确数据结构，以遍历每个帖子。此外，检查控制台日志，以确保数据被正确提取并传递到组件。

赞(0）回复(0）举报 9个月前

我来回答

wordpress 使用graphQl Next.js在headless wp中获取未定义的帖子

1条答案

相关问题

热门标签

最新问答