Wordpress Gatsby.js Get databaseId in graphql staticQuery

Question

I want to dynamically add databaseId to each page in gatsby.js.

I want to add it to the <body> tag using Helmet in the layout.js file.

I found this answer that shows how to add the the class to the body using helmet,

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

the issue is that as far as I understand, I can't retrieve the 'databaseId' in a static query, because the static query brings data from a component and not from a a page.

This is what I have so far. The current databaseId returns a fixed number.

How can I bring the post databaseId in a 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>
)
/>

score 0 · Answer 1 · edited Aug 04 '21 at 08:47

You can always create a separate query in your gatsby-node.js, where you create your dynamic WordPress pages and send via context the databaseId and use it in the tempalte to set the bodyAttributes. For example:

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
      },
    })
  })
}

Then, in your template (./src/templates/post.js following the previous example):

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
              }
            }
          }
        }
      }
    }
  }
`

Modified from https://github.com/gatsbyjs/gatsby/blob/master/starters/gatsby-starter-wordpress-blog/src/templates/Post.js

The data sent through context API is available in props.pageContext.

In case your databaseId is not available in allWpPost node, you can extract it either way from the page/template query in the following node:

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

Of course, adapt and tweak the snippets above to fit your specifications.

Wordpress Gatsby.js Get databaseId in graphql staticQuery

1 Answers1