Wordpress Gatsby.js 在 graphql staticQuery 中获取 databaseId答案

【问题标题】：Wordpress Gatsby.js Get databaseId in graphql staticQueryWordpress Gatsby.js 在 graphql staticQuery 中获取 databaseId
【发布时间】：2021-10-02 05:29:06
【问题描述】：

我想给 gatsby.js 中的每个页面动态添加 databaseId。

我想在 layout.js 文件中使用 Helmet 将其添加到 <body> 标记中。

我发现这个答案显示了如何使用头盔将类添加到身体，

How to add a dynamic class to body tag in Gatsby.js?

问题是，据我了解，我无法在静态查询中检索“databaseId”，因为静态查询从组件而不是页面获取数据。

这是我目前所拥有的。当前的databaseId返回一个固定的数字。

如何将 post databaseId 带入 staticQuery。

<StaticQuery
query={graphql`
    query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
    wpPage {
        databaseId
    }
  }
`}
render={data => (
    <div>
        <Helmet bodyAttributes={{
            class: 'dynamic-databaseId-class-will-go-here'
        }} >
        </Helmet>
    </div>
)
/>

【问题讨论】：

标签： wordpress graphql gatsby

【解决方案1】：

您始终可以在 gatsby-node.js 中创建单独的查询，在其中创建动态 WordPress 页面并通过上下文发送 databaseId 并在模板中使用它来设置 bodyAttributes。例如：

const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // query content for WordPress posts
  const {
    data: {
      allWpPost: { nodes: allPosts },
    },
  } = await graphql(`
    query {
      allWpPost {
        nodes {
          id
          uri
          databaseId
        }
      }
    }
  `)

  const postTemplate = path.resolve(`./src/templates/post.js`)

  allPosts.forEach(post => {
    createPage({
      path: post.uri,
      component: slash(postTemplate),
      context: {
        id: post.id,
        databaseId: post.databaseId
      },
    })
  })
}

然后，在您的模板中（./src/templates/post.js 遵循上一个示例）：

const BlogPostTemplate = ({ data, pageContext }) => {

  return (
    <Layout>
        <Helmet bodyAttributes={{
            class: `dynamic-${pageContext.databaseId}-class-will-go-here`
        }} >
        </Helmet>
       <h1>Your post </h1>
    </Layout>
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostById(
    # these variables are passed in via createPage.pageContext in gatsby-node.js
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    # selecting the current post by id
    post: wpPost(id: { eq: $id }) {
      id
      excerpt
      content
      title
      date(formatString: "MMMM DD, YYYY")
      featuredImage {
        node {
          altText
          localFile {
            childImageSharp {
              fluid(maxWidth: 1000, quality: 100) {
                ...GatsbyImageSharpFluid_tracedSVG
              }
            }
          }
        }
      }
    }
  }
`

修改自https://github.com/gatsbyjs/gatsby/blob/master/starters/gatsby-starter-wordpress-blog/src/templates/Post.js

通过上下文 API 发送的数据在props.pageContext 中可用。

如果您的databaseId 在allWpPost 节点中不可用，您可以从以下节点的页面/模板查询中提取它：

 post: wpPost(id: { eq: $id })

当然，调整和调整上面的 sn-ps 以适合您的规格。

【讨论】：