将数据从 Graphql 提取到 Gatsby 的问题

Question

我对 gatsby/编程很陌生，我正在玩 gatsby。我有以下问题，如果您能告诉我哪里出了问题，我将不胜感激？下面是我的代码。

问题 1：为什么我不能返回/访问 {post1.categories.nodes.name} ？它在我的页面上没有显示任何内容。

请注意，我访问 {post.video.videoSource} 没有问题，所以我想我的 Graphql 工作正常，但是当我尝试使用 {post1.categories.nodes.name} 时，它实际上是空白的。

有什么建议吗？非常感谢。

const BlogIndex = ({
  data,
  pageContext: { nextPagePath, previousPagePath },
}) => {
  const posts = data.allWpPost.nodes

  if (!posts.length) {
    return (
      <Layout isHomePage>
        <Seo title="All posts" />
        <Bio />
        <p>
          No blog posts found. Add posts to your WordPress site and they'll
          appear here!
        </p>
      </Layout>
    )
  }

  return (
    <Layout isHomePage>
      <Seo title="All posts" />

      {/* <Bio /> */}

      <Grid container rowSpacing={5} column spacing={5}>
        <Grid item xs={12} sm={3} md={3} lg={3}>
          <Paper>
            <ol style={{ listStyle: `none` }}>
              {posts.map(post1 => {
                return <li>{post1.categories.nodes.name}</li>
              })}
            </ol>
          </Paper>
        </Grid>

        <Grid item xs={12} sm={9} md={9} lg={9}>
          <Paper>
            <ol style={{ listStyle: `none` }}>
              {posts.map(post => {
                const hasVideoUrl = post.video.videoSource

                if (hasVideoUrl !== null) {
                  return (
                    <li key={post.uri}>
                      <article
                        className="post-list-item"
                        itemScope
                        itemType="http://schema.org/Article"
                      >
                        <header>
                          <small>{post.video.videoSource}</small>
                          <small>{post.video.videoUrl}</small>
                          {/* <ReactPlayer url={post.video.videoUrl} /> */}
                        </header>
                      </article>
                    </li>
                  )
                } else {
                  return null
                }
              })}
            </ol>
          </Paper>
        </Grid>
      </Grid>

      {previousPagePath && (
        <>
          <Link to={previousPagePath}>Previous page</Link>
          <br />
        </>
      )}
      {nextPagePath && <Link to={nextPagePath}>Next page</Link>}
    </Layout>
  )
}

export default BlogIndex

export const pageQuery = graphql`
  query WordPressPostArchive($offset: Int!, $postsPerPage: Int!) {
    allWpPost(
      sort: { fields: [date], order: DESC }
      limit: $postsPerPage
      skip: $offset
    ) {
      nodes {
        excerpt
        uri
        date(formatString: "MMMM DD, YYYY")
        title
        video {
          videoSource
          videoUrl
        }
        categories {
          nodes {
            name
          }
        }
      }
    }
  }
`

问题 2 [2022 年 7 月 2 日添加]：

       <ul>
          {wpPosts.map(wpPost => {
            wpPost.tags.nodes.map(tag => {
              console.log(tag.name)

              if (tag.name === "Blog") {
                return (
                  <div>
                    <li>{tag.title}</li>
                  </div>
                )
              }
            })
          })}
        </ul>



  const data = useStaticQuery(
    graphql`
      query {
        allWpPost(sort: { fields: date, order: DESC }, limit: 10) {
          nodes {
            excerpt
            slug
            uri
            video {
              videoTitle
              videoUrl
            }
            title
            date(formatString: "MMMM DD, YYYY")
            tags {
              nodes {
                name
              }
            }
          }
        }
      }
    `
  )

  const wpPosts = data.allWpPost.nodes

Answer 1

问题 1：为什么我不能返回/访问 {post1.categories.nodes.name} ?它在我的页面上没有显示任何内容。

nodes（在post1.categories.nodes.name中）很可能是一个数组，因此您需要循环遍历它或访问特定位置：

return <li>{post1.categories.nodes[0].name}</li>

根据您的数据结构，您需要循环或仅访问第一个位置。在不知道您的数据的情况下很难猜测。