如何在 Gatsby 中获取所有 Wordpress 帖子和显示标签

Question

第一次使用 Gatbsy 和 GraphQL。我想知道如何显示标签。 GraphQL 编辑器中没有以明显的方式列出。

我希望在分类法下找到它们，但它只显示名称和类型的“类别”和“帖子”......

这是在一个自定义的 React 页面中，该页面将用作特定类别帖子的索引。 另外，不相关的问题... Gatbsy 似乎只从 Wordpress 网站上提取了我的一些内容。我错过了很多缩略图，尽管它们是帖子中的特色图片。

export const pageQuery = graphql`
  query {
    allWordpressPage {
      edges {
        node {
          id
          title
          excerpt
          slug
        }
      }
    }
    allWordpressPost {
      edges {
        node {
          title
          excerpt
          slug
          featured_media {
            source_url
          }
          categories {
            name
            taxonomy {
              name
              types

            }
          }
        }
      }
    }
  }
`

const ClientProjectsIndexPage = ({ data }) => {
  console.log({data})
  return (
    <div className="wave-pattern-bg">
      <VideoBanner
        text="Client Projects"
        videoSrc={meetingVid}
        imageSrc={null}
      />
      <Layout>
        <SEO title="Index of Client Projects" />
        <div className="card-wrap index">
          {data.allWordpressPost.edges
            .filter(post => post.node.categories[0].name === "Client Projects")
            .map((post, index) => (
              <Segment
                key={index}
                onClick={() => {
                  navigate(`/${post.node.slug}`)
                }}
              >
                <div className="index-portrait-wrap">
                  {post.node.featured_media ? (
                    <Image avatar src={post.node.featured_media.source_url} />
                  ) : (
                    <Image avatar src={emptyThumbnail} />
                  )}
                  <h1>{post.node.title}</h1>
                </div>
                <p>{post.node.excerpt}</p>
              </Segment>
            ))}
        </div>
      </Layout>
      <Contact />
    </div>
  )
}

export default ClientProjectsIndexPage

Answer 1

愚蠢的我，我匆忙中似乎错过了它！

我仍然需要弄清楚为什么大多数特色图片没有被提取，但这里是标签查询......

export const pageQuery = graphql`
  query {
    allWordpressPage {
      edges {
        node {
          id
          title
          excerpt
          slug
        }
      }
    }
    allWordpressPost {
      edges {
        node {
          title
          excerpt
          slug
          featured_media {
            source_url
          }
          categories {
            name
          }
          tags {
            name
          }
        }
      }
    }
  }
`