git clone https://github.com/octahedroid/gatsbyconf.git

cd gatsbyconf

yarn 

yarn develop

src/pages/{nodePage.path__alias}.js

    { JSON.stringify(node, {}, 2) }

import Title from "../components/field/title";
import Body from "../components/field/body";

 src/pages/{nodePage.path__alias}.js

    field_show_title

{ node.field_show_title &&  }

 src/pages/{nodePage.path__alias}.js

# GraphQL Customization Fields
fields {
  bodyProcessedWithInlineImages
}

src/pages/{nodePage.path__alias}.js

# GraphQL Customization Fields
fields {
    inlineImages {
      originalImageUrl
      localFile {
        childImageSharp {
          gatsbyImageData(width: 1024)
        }
      }
    }
}

import BodyInlineImages from "../components/field/body-inline-images";

      relationships {
        field_components {
          __typename
          ...ParagraphBlogTeaser
          ...ParagraphHeroCta
          ...ParagraphImage
          ...ParagraphText
        }
      }

import uuid from "react-uuid"
import { componentResolver } from "../helpers/component-resolver"

const components = componentResolver(node?.relationships?.field_components);

{components &&
  components.map((item) => {
    return 
   
    {item}
   
})}

">

src/pages/{nodeArticle.path__alias}.js

    { JSON.stringify(node, {}, 2) }

import Cover from "../components/cover";

      created
      relationships {
        field_author: uid {
          field_full_name
          relationships {
            field_picture {
              relationships {
                field_media_image {
                  localFile {
                    childImageSharp {
                      gatsbyImageData(layout: FIXED, width: 48, height: 48)
                    }
                  }
                }
              }
            }
          }
        }
        field_image {
          relationships {
            field_media_image {
              localFile {
                childImageSharp {
                  gatsbyImageData(width: 1500)
                }
              }
            }
          }
        }
      }

const author = {
  name: node.relationships.field_author.field_full_name,
  picture: node.relationships.field_author.relationships.field_picture.relationships.field_media_image.localFile.childImageSharp,
}

src/helpers/fragments.js

export const ParagraphCodeBlock = graphql`
  fragment ParagraphCodeBlock on paragraph__code_block {
    field_title
    field_code
    field_language
    field_show_line_numbers
  }
`

src/pages/{nodeArticle.path__alias}.js

        field_components {
          __typename
          ...ParagraphText
          ...ParagraphCodeBlock
        }

import uuid from "react-uuid"
import { componentResolver } from "../helpers/component-resolver"

const components = componentResolver(node?.relationships?.field_components);

{components &&
  components.map((item) => {
    return 
   
    {item}
   
})}

">

src/helpers/component-resolver.js

import ParagraphCodeBlock from "../components/paragraph/paragraph-code-block";

    if (component.__typename.includes(`paragraph__code_block`)) {
        return (
            
   
        )
    }

src/pages/{nodeArticle.path__alias}.js

{ const pathAlias = `/${params.path__alias}`; return { defer: data.dsgArticles.nodes.some( article => article.path.alias === pathAlias ) } } }">

export async function config() {
  // GraphQL Query
  // - Fetch allNodeArticle filtered by field_rendering_mode equals to DSG
  // - Any other(s) filter(s) you could implement:
  //   - Articles created more than a year ago
  //   - Articles with low traffic (integarte with your analytics data)
  const { data } = graphql`  
  {
    dsgArticles: allNodeArticle (filter:{field_rendering_mode:{eq:"DSG"}}) {
      nodes {
        path {
          alias
        }
      }
    }
  }
  `

  return ({ params }) => {
    const pathAlias = `/${params.path__alias}`;
    return {
      defer: data.dsgArticles.nodes.some( article => article.path.alias === pathAlias )
    }
  }
}