Customizing Gatsby Graphql schema

Recently I was doing redesign of my blog. As you may know, I used Gatsby.js. All in all, it is a very good static site generator but I had one problem with it. Or to be more precise the issue was with Gatsby and the TypeScript.


I try to help myself when writing frontend code so I decided that I will try to automatically generate TypeScript interfaces from GraphQL schema that Gatsby.js is using. Everything was fine until I found out that by design many fields are undefined. Take for example siteMetadata object:

siteMetadata: {
siteName: 'Krzysztof Żuraw',
author: 'Krzysztof Żuraw',
description: 'Krzysztof Żuraw personal site & blog',
siteUrl: '',
social: {
linkedin: '',
github: '',
email: '',
pinboard: '',
newsletter: '',

You can see this file here.

I tried to generate TypeScript types for this structure using GraphQL Code Generator to get:

export type SiteSiteMetadata = {
__typename?: "SiteSiteMetadata";
siteName?: Maybe<Scalars["String"]>;
author?: Maybe<Scalars["String"]>;
description?: Maybe<Scalars["String"]>;
siteUrl?: Maybe<Scalars["String"]>;
social?: Maybe<SiteSiteMetadataSocial>;

What? All of them are undefined or null? No way - I know they will be defined in the time when I generate a static site. I asked around and Hasparus give me a hint - you can customize your GraphQL schema 🎉.

To do that I had to use createSchemaCustomization (you have to place it inside gatsby-node.js):

exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions;
const typeDefs = `
type MarkdownRemark implements Node {
frontmatter: Frontmatter!
type Frontmatter {
tags: [String!]!
title: String!
slug: String!
difference: String
formatString: String
fromNow: Boolean
locale: String
): Date!
type Site implements Node {
siteMetadata: SiteSiteMetadata!
type SiteSiteMetadata {
siteName: String!
author: String!
description: String!
siteUrl: String!
social: SiteSiteMetadataSocial!
type SiteSiteMetadataSocial {
linkedin: String!
github: String!
email: String!
pinboard: String!
newsletter: String!

What is happening here? I added my own GraphQL types where all the fields are not nullable. Thanks to that it generated types look like follows:

export type SiteSiteMetadata = {
__typename?: "SiteSiteMetadata";
siteName: Scalars["String"];
author: Scalars["String"];
description: Scalars["String"];
siteUrl: Scalars["String"];
social: SiteSiteMetadataSocial;

One drawback of it - right now it is on me as a developer, to make sure that all the data from e.g frontmatter will be there.


I wanted to fix autogenerated GraphQL types in Gatsby. Thanks to Hasparus suggestion I've used createSchemaCustomization to override guested Gatsby types.

Thank you Hasparus once again 🙇🏻‍♂️.