gatsby-source-drupal and using Drupal's Paragraphs module - need to edit schema so all paragraph types are queryable without error

[chris-bingham]

Tech Stack

• "gatsby": "^3.0.1",
• "gatsby-source-drupal": "^4.0.0",
• Drupal 9, relevant modules:
  • Paragraphs - 8.x-1.12
  • JSON:API - 9.1.3

Context

I am working on a site that uses Drupal as its sole datasource, we retrieve the data using the gatsby-source-drupal plugin. We are using Drupal's Paragraphs module to allow the site admins to add bespoke blocks to pages of any content type.

The Issue

The problem we are having is that when no nodes of a specific content type use a specific paragraph type, that relationship wont be added to the JSON API and the graphql query will throw an error.

Simplified query:

export const pageQuery = graphql`
    query Person($id: String!) {
        person: nodePeople(id: { eq: $id }) {
          field_sections {
              __typename
              ...AccordionParagraphData
              ...ImageParagraphData
          }
        }
    }
`;


fragment AccordionParagraphData on paragraph__accordion_container {
        id
    }
    
   
fragment ImageParagraphData on paragraph__media_image {
        id
    }

Error:

Fragment "ImageParagraphData" cannot be spread here as objects of type "paragraph__accordion_containerparagraph__iframe_embedUnion" can never be of type "paragraph__media_image".

The client needs the flexibility to use any amount of the paragraph types on any content types.

Fix that isn't working

I have tried using onSchemaCustomization in gatsby-node.js to add a union type so that we can query for all paragraph types even if they are not used.
Here's a simplified version of this with just a few paragraph types and one content type:

exports.createSchemaCustomization = ({ actions, schema }) => {

    const typeDefs = [
        schema.buildObjectType({
            name: "paragraph__accordion_container",
            interfaces: ["Node"],
            fields: {
                id: "ID!"
            }
        }),
        schema.buildUnionType({
            name: "AllParagraphsUnion",
            types: [
                "paragraph__accordion_container",
                "paragraph__iframe_embed",
                "paragraph__media_image",
            ]
        }),
        schema.buildObjectType({
            name: "node_peopleRelationships",
            interfaces: ["Node"],
            fields: {
                field_sections: ["AllParagraphsUnion"]
            }
        }),
    ];

    actions.createTypes(typeDefs);

This allows us to query for all paragraph types without error and the gql schema looks correct. However when querying for field_sections it always just contains null. It should be an array of paragraphs or and empty array if the node has no paragraphs.

Any help to fix this solution or other ideas would be so greatly appreciated!