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

Question

我是 gatsby/programming 的新手，我正在玩 gatsby。我有以下问题，如果您能让我知道哪里出了问题，我将不胜感激？下面是我的代码。

问题 1：为什么我不能 return/access {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
          }
        }
      }
    }
  }
`

Answer 1

Problem 1: Why i can't return/access the {post1.categories.nodes.name} ? It shows nothing on my page.

nodes（在post1.categories.nodes.name中）很可能是一个数组，所以你需要遍历它或者访问特定的位置：

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

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

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

Problem with pulling data from Graphql into Gatsby

graphql

gatsby