Extending WP GraphQL images with gatsby-image functionality

gatsby-node.js

const { createRemoteFileNode } = require(`gatsby-source-filesystem`)

// Note that WPGraphQL_MediaItem depends on your gatsby-source-graphql typeName which is set in the config

exports.createResolvers = ({
                             actions,
                             cache,
                             createNodeId,
                             createResolvers,
                             store,
                             reporter,
                           }) => {
  const { createNode } = actions
  createResolvers({
    WPGraphQL_MediaItem: {
      imageFile: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: source.sourceUrl,
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          })
        },
      },
    },
  })
}

query-example.js

// Note: Make sure to query sourceUrl, otherwise gatsby-image doesn't work

export const pageQuery = graphql`
    query($id: ID!) {
        WPGraphQL {
            pageBy(id: $id) {
                featuredImage {
                    sourceUrl
                    imageFile {
                      childImageSharp {
                        fixed {
                          ...GatsbyImageSharpFixed
                        }
                      }
                    }
                }
            }
        }
    }
`