Global settings story with Gatsby and Storyblok

gatsby-node.js

const Promise = require('bluebird')
const path = require('path')

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

  return new Promise((resolve, reject) => {
    const storyblokEntry = path.resolve('src/templates/storyblok-entry.js')

    graphql(
      `{
        allStoryblokEntry(
          filter: {
            slug: { eq: "settings" }
          }
        ) {
          edges {
            node {
              id
              name
              created_at
              published_at
              uuid
              slug
              full_slug
              content
              is_startpage
              parent_id
              group_id
            }
          }
        }
      }`
    ).then(result => {
      if (result.errors) {
        console.log(result.errors)
        reject(result.errors)
      }

      const globalSettings = result.data.allStoryblokEntry.edges[0].node
      resolve(
        graphql(
          `{
            allStoryblokEntry {
              edges {
                node {
                  id
                  name
                  created_at
                  published_at
                  uuid
                  slug
                  full_slug
                  content
                  is_startpage
                  parent_id
                  group_id
                }
              }
            }
          }`
        ).then(result => {
          if (result.errors) {
            console.log(result.errors)
            reject(result.errors)
          }

          const entries = result.data.allStoryblokEntry.edges
          entries.forEach((entry, index) => {
            createPage({
              path: `/${entry.node.full_slug}/`,
              component: storyblokEntry,
              context: {
                globalSettings: globalSettings,
                story: entry.node
              }
            })
          })
        })
      )
    })
  })
}

Should change second query from:

allStoryblokEntry {
              edges {....

to:

allStoryblokEntry (filter: { slug: { ne: "settings" } }) {
              edges {...

Otherwise, build will fail with generic: "Minified React error #130" (but will work in development, just not production)

This happens because there's no settings component to render the page with (nor should there be, since we don't intend to display the settings page on the front-end for the end-user). So, when generating the static HTML in gatsby build, gatsby will pass the settings page along with the other pages and try to build HTML for it, thus making a call to an undefined component settings and crashing the build with Minified React error #130.