While fiddling with Gatsby, I wondered: what about fetching data from Drupal to push into the siteMetadata array? In the gatsby-config.js API file, you can specify metadata about the site. This is used to store things such as the site's title, a description to be used in meta tags and more. What if I wanted the site name dynamic? Is there a way to manipulate the siteMetadata during the Gatsby build process?

I did some digging. You can't. The metadata is only populated by the config API file. I tried asking in Drupal Slack. Then I realized I went about it the wrong way. The solution? Just create a new node with only one value. Nodes generate a schema in GraphQL and if there's only one value, you get the one value. Apparently, if there are multiple values that's when you can query. I'm still new to GraphQL, so I have no idea if this is a Gatsby-ism or a GraphQL-ism. 

So my idea began to unfold:

• In my theme, add the exports.sourceNodes hook
• Fetch my JSON:API metadata endpoint, which contains information about the site based on the current domain and storefront.
• Normalize the data and use createNode to push it into the GraphQL data schema.

The result? Profit!

I was able to build a custom JSON:API endpoint using the JSON:API Resources module that returned the data I needed. This data was then pushed into Gatsby's GraphQL data. And then I could use it for displaying site information - such as the store's address, or dynamically gathering the site's name.

I'm available for one-on-one consulting calls – click here to book a meeting with me 🗓️