2

I am almost able to create Hero banner images with different layouts depending on what fields are filled out in a headless CMS/Contentful. I am able to get data from Contentful endpoint and have optional fields for header titles(sting values) when defining types for them in advance in the gatsby-node.js file if/when Gatsby does not find them:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type ContentfulHeroBannerSet implements Node {
      headerFirstLeft: String
      headerFirstCenter: String
      headerFirstRight: String
    }
  `;
  createTypes(typeDefs);
};

And then checking their existence in React components renders them if they exist: 

 {item.node.headerRight && (
              <>
                <Container
                  item
                  xs={6}
                  spacing={3}
                  className={classes.topContainer}
                >

Now I have added another optional field with rich text and I can not find out how to set the type definition for it in advance and Gatsby does not allow to build project before it finds automatically or in advance a type for subHeaderLeft. Heres the query in Index.js:

export const pageQuery = graphql`
  query HomeQuery {
    site {
      siteMetadata {
        title
      }
    }
    allContentfulHeroBannerSet(limit: 2) {
      edges {
        node {
          headerLeft
          headerCenter
          headerRight   //So far so good
          subHeaderLeft { // Here comes the problem
            childMarkdownRemark {
              html
            }
          }

ERROR: There was an error in your GraphQL query: Cannot query field "childMarkdownRemark" on type.. It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "contentfulHeroBannerSetSubHeaderSecondLeftRichTextNode": https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions.

Tried also to read through that docs page but still stuck. Dummy content would not suit as the idea is to have optional fields for content editors. Any ideas?

Patrik Rikama-Hinnenberg
  • 1,362
  • 1
  • 16
  • 27
  • did you try nested types? https://www.gatsbyjs.org/docs/schema-customization/#nested-types – diedu Feb 23 '20 at 23:37
  • @diedu I'll have to maybe look at that one a bit closer, felt though quite complicated to set types for all different markdown types, or then it is simple. Could not find an example. I'll jump into the graph QL web interfacemprovided in gatsby develop and try to find out the types I can get out. – Patrik Rikama-Hinnenberg Feb 24 '20 at 22:26
  • In the docs it says: ```type MarkdownRemark implements Node { frontmatter: Frontmatter }``` what is that? – Patrik Rikama-Hinnenberg Feb 24 '20 at 22:29

0 Answers0