Struggling with Type Definitions using Strapi 4 and Gatsby

Questions and Answers
1
System Information
  • Strapi: 4.2.3:
  • Gatsby: 4.19.1:
  • Gatsby source Strapi: 2.0.0:
  • Node: 16.16.0:
  • Database: mysql:

Hello, I try to get around that dummy data thing with optional components / relations in strapi and gatsbys graphql.

In my test case I have a Single Type “Company” where I have a SEO Component attached. The Seo component is optional and overrides later the default Seo configuration when set.

With the following GraphQL page query I get an error as expected when there is no SEO instance created.

export const query = graphql`
  {
    strapiCompany {
      title
      seo {
        metaTitle
        metaDescription
        metaRobots
        keywords
        canonicalURL
        metaImage {
          localFile {
            childImageSharp {
              gatsbyImageData(layout: FIXED)
            }
          }
        }
        metaSocial {
          socialNetwork
          title
          description
          image {
            localFile {
              childImageSharp {
                gatsbyImageData(layout: FIXED)
              }
            }
          }
        }
      }
    }
  }
`

So as suggested by Gatsby I tried to explicitly type the GraphQL schema in gatsby-node.js

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  // type definitions go here
  const typeDefs = `
    type STRAPI_COMPANY implements Node {
      title: String!
      seo: [STRAPI__COMPONENT_SHARED_SEO]
    }
  `
  createTypes(typeDefs)
}

At first this seems to work fine.
The page query now runs with no errors and the needed nodes are created in GraphQL.
gatsby_graph_ql

The seo component has now a value of “null” and I can work with that.

But now here is my problem. When I finally add the seo component and fill in some data, the result always stays null.

Query

query MyQuery {
  strapiCompany {
    seo {
      metaTitle
    }
  }
}

Result

{
  "data": {
    "strapiCompany": {
      "seo": null
    }
  },
  "extensions": {}
}

I have found following articles on this topic, but they seem to be for Gatsby 3 and a bit outdated.
I had no luck with type names like strapiCompany etc.

https://www.virtualbadge.io/blog-articles/nullable-relational-fields-strapi-gatsbyjs-graphql
https://medium.com/swlh/gatsby-graphql-and-the-missing-but-necessary-explanation-about-type-definitions-87a5ef83e759

Can somebody help? Why I am not getting the current SEO Component data when it is set?
What am I missing here?

Thanks in advance

1 Like