Got an issue with fragments, in a graphql query for a gatsby site I am working on that uses Contentful as the CMS:

Consider the following query:

export const query = graphql`
    query ComposablePageQuery($slug: String!) {
        contentfulPage(slug: { eq: $slug }) {
            __typename
            contentful_id
            slug
            sections {
                __typename
                contentful_id
                ... on ContentfulModelA {
                    fieldA
                    fieldB
                }
                ... on ContentfulModelB {
                    fieldC
                    fieldD
                }
            }
        }
    }
`;

Now the sections variable, is an array that can accept different model references, in my case, I have two models, ModelA and ModelB, with trivial fields for the sake this question.

The trouble is that unless at least one instance of each is included sections array in the particular page, I get the following error:

There was an error in your GraphQL query:

Fragment cannot be spread here as objects of type "ContentfulModelA" can never be of type "ContentfulModelB".

If the sections array has both models present, then no problem.

So how can this be addressed, I want the query to handle the case that ModelA OR ModelB may be present in the list, but without guarantee. Seems like a reasonable request given that in web design, it’s foreseeable that a particular page may be rich in one particular model, and completely void of the other, and a different page vice-versa, and another page may combine both.

I have tried declaring fragments explicitly too, and replacing the inline fragment usage illustrated above, but the same error persists.