Gatsby + Drupal: Custom GraphQL schema

A developer (me) links Gatsby to Drupal. Drupal tells Gatsby "I have a related content field where you could link 7 different entity types to, but I have room for 3". Developer says "OK". Gatsby says "OK, but I want you to put those 7 types in those 3 slots". Badumtss.

The problem with Gatsby and Drupal is quite simply this: if a field doesn't have a value in Drupal, Gatsby won't select it in its query. If the value isn't available in any entity, it won't exist in Gatsby.

Example:

In this project I have a paragraph type with some optional fields, like a list for background colours, margins, etc. Some of these fields exists "just in case" but aren't filled out necessarily. This results in these fields not being available in the schema Gatsby creates, and I can't query it in the React frontend (Cannot query field "[fieldname]" on type "[typename]". Did you mean "[other_fieldname]").

1. Quickfix

The quick fix is to build a page with all fields and values present. This way, it'll be available in the schema and query. But the page itself will be available on your production site as well and that's not desirable. You could write something to disable that page, but that feels hackish.

2. Slowfix

Behind door number two there is a way to manually change the Gatsby schema using createSchemaCustimozation in gatsby-node.js so you predefine the fields. It's a bit more complex, but better. In the example below, I want to define field_margin_top and field_margin_bottom for the paragraph type "1_column_text".

exports.createSchemaCustomization = ({actions}) => {
    const { createTypes } = actions;

    const typeDefs = `
    type paragraph__1_column_text implements Node {
        field_margin_top: String
        field_margin_bottom: String
    }
    `
    createTypes(typeDefs);
}

This way, it doesn't matter if the fields are filled out in the Drupal backend, it'll be present anyway.