How to add global dynamic scripts to GATSBY <head> <body> element

Requirement :
Page specific head and body section external scripts will be defined in the contentful CMS, those scripts need to be added in the respective head section and body section.

Example: Head section
Body Section:
Issue:
document" is not available during server-side rendering. Enable “DEV_SSR” to debug this during "gatsby develop.

Implementation Attempts:
Below screen explaining how end user prefer to manage page specific head and body section scripts in contentful

Graph QL query returning the data

Attempted to use Gatsby Head API. Dev environment able to show the scripts in the respective section but after committing the code and triggering the Gatsby cloud it throws an above error. I have tried using , . Please help how should I implement this requirement.

Hi there,

Thanks for reaching out! You’ll likely want to use the Script API to load your dynamic scripts rather than the Head API, which is better for data-block scripts.

This blog post details the difference between the two, with examples for implementing both into your project. Let us know if you have any questions!

module.exports = {
  siteMetadata: {
    siteUrl: `https://reece-gatsby-portal.netlify.app`, 
  },
  headers: [
    {
      source: `*`,
      headers: [
        {
          key: `Content-Security-Policy`,
          value: `frame-ancestors https://iframetester.com/` 
        }
      ]
    }
  ],  

Thanks. This is now working

thanks for sharing this with the community.