Extending Gatsby GraphQL schema with interfaces to query shared fields across multiple similar types

gatsby-node.js

const path = require("path")
const fs = require("fs")

// Extend GraphQL Types
exports.sourceNodes = ({ actions }) => {
  const { createTypes } = actions

  const typeDefs = fs.readFileSync(
    path.resolve(__dirname, "schema.graphql"),
    "utf8"
  )
  createTypes(typeDefs)
}

schema.graphql

# Define a common interface for all content block types; specify
# any fields that you want to query on the union directly here
interface ContentBlock {
  title: String 
}

# Explicitly implement the interface for each content block type
type SanityHero implements ContentBlock {
  title: String
}

type SanityCarousel implements ContentBlock {
  title: String
}

# Define a union of all of your content block types
union ContentBlocks = SanityHero | SanityCarousel

# Set the field type to an array of your union in any cases where
# you want to be able to query your shared fields at the top level
type SanityPage implements Node {
  content: [ContentBlocks]
}

SomePageComponent.jsx

import React from "react"
import { graphql } from "gatsby"

const Page = props => <pre>{JSON.stringify(props, null, 2)}</pre>

export default Page

export const query = graphql`
  {
    sanityPage {
      content {
        ...Blocks
        ...on SanityHero {
          heroSpecificField
        }
      }
    }
  }

  fragment Blocks on ContentBlock {
    # shared fields
    title
  }
`