How to workaround non existent types in Graphql query in Gatsby

Question

I'm building a website with a blog section, and on deployment to production the blog will be empty. I'm having problems allowing an empty blog on my Gatsby site.

When I run npm run develop it will only work if I have some blogs - I want it to work before the blogs have been added.

The main issues I'm encountering is trying to accomidate fields not existing like allStrapiBlog and strapiBlog because there are no blogs.

I get errors like this on blog components, and on my nav component (where i have a query that a conditional uses).

  15:17  error  Cannot query field "allStrapiBlog" on type "Query"  graphql/template-strings

Cannot query field "strapiBlog" on type "Query"

This is what the query looks like for my navigation component. But it throws an error - is there a way to make it just return null?

query NavigationQuery {
    allStrapiBlog {
        nodes {
            title
            strapi_id
        }
        totalCount
    }
}

How do I make unsuccessful GraphQL queries not break the build, so I can build a gatsby site with a empty blog?

Answer 1

But it throws an error - is there a way to make it just return null?

Indeed, you need to configure your GraphQL schema to allow nullable fields.

You have a boilerplate that you can tweak to match your data types at https://www.virtualbadge.io/blog-articles/nullable-relational-fields-strapi-gatsbyjs-graphql.

The idea relies on using the createSchemaCustomization API in your gatsbt-node.js to add your own type definitions.

Something like:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type StrapiBlogPost implements Node {
      title: String!
      content: String
      thumbnail: File
    }
  `;
  createTypes(typeDefs);
};

In this case, the title is required (because of the !, which means that the type is non-nullable) while content and thumbnail can be null.

Afterward, you will only need to adapt your component to avoid code-breaking logics when null data is fetched.