feat(gatsby-plugin-image): support multiple sources using gatsby-plugin-image

[angeloashmore]

Description

This PR allows Gatsby apps to use more than one source that uses gatsby-plugin-image.

For example, users can use gatsby-source-prismic and gatsby-source-shopify together on the same app with this PR.

Without this PR, using multiple sources that use gatsby-plugin-image results in the following error during Gatsby's bootstrap phase:

[ Truncated log ]

success Checking for changed pages - 0.001s
success source and transform nodes - 12.721s

 ERROR

Missing onError handler for invocation 'building-schema', error was 'Error: Schema must contain uniquely named types but contains multiple types named "GatsbyImageLayout".'.
Stacktrace was 'Error: Schema must contain uniquely named types but contains multiple types named "GatsbyImageLayout".
    at new GraphQLSchema (/[path-to-project]/gatsby-starter-shopify/node_modules/graphql/type/schema.js:194:15)
    at SchemaComposer.buildSchema (/[path-to-project]/gatsby-starter-shopify/node_modules/graphql-compose/lib/SchemaComposer.js:179:12)
    at buildSchema (/[path-to-project]/gatsby-starter-shopify/node_modules/gatsby/src/schema/schema.js:80:33)
    at build (/[path-to-project]/gatsby-starter-shopify/node_modules/gatsby/src/schema/index.js:110:18)
    at buildSchema (/[path-to-project]/gatsby-starter-shopify/node_modules/gatsby/src/services/build-schema.ts:19:3)'

not finished building schema - 82.814s

Why does this happen?

I believe this is a result of getGatsbyImageResolver and getGatsbyImageFieldConfig using GraphQL type constructors from the graphql package. Gatsby (i.e. graphql-compose) sees each newly created type as unique (e.g. the GatsbyImageFormat enum).

Because multiple plugins are calling getGatsbyImageFieldConfig and passing it to Gatsby, shared types such as GatsbyImageFormat are registered twice in the GraphQL schema.

How is it fixed?

This can be fixed by using Gatsby's schema helpers which is built upon graphql-compose. We can reference these Gatsby-specific types using strings rather than concrete object references. This allows us to register the type only once.

⚠️ Breaking change: This requires the shared types to be registered somewhere. This PR registers the shared types in gatsby-plugin-image's createSchemaCustomization API. Taking this approach requires users to add gatsby-plugin-image to their gatsby-config.js, potentially making this a breaking change.

Alternatively, the types could be exported by gatsby-plugin-image and required to be registered by plugins.

Recommended change: As a final alternative option, it could be added to Gatsby as a first-class type, like File. It doesn't matter where the types are registered, as long as it happens somewhere at least once.

Documentation

• Reference: Gatsby Image plugin
• Plugin: gatsby-plugin-image

If users are required to add gatsby-plugin-image as a plugin (currently this is optional), documentation may need to be updated. The current documentation already instructs users to add the plugin to gatsby-config.js, but makes no mention that it is optional.

Related Issues

From gatsby-source-prismic: prismicio/prismic-gatsby#416

[DennisKraaijeveld]

Thanks for picking this one up! Hopefully there will be a fix soon because using Gatsby Image icm Prismic would be awesome.

[Casdak7]

This would be a great fix for the issue of having two plugins that reference Gatsby Image (i.e. shopify source and prismic source). Those two specifically would be great together, seeing as Prismic's slices and repeater fields make it very powerful.

[DennisKraaijeveld]

@wardpeet Is there any ETA on this? :)

[wardpeet]

Tested and works like a charm. Thanks a bunch @angeloashmore

[jonsherrard]

Hello all!

I have an error whilst trying to upgrade to Gatsby V4, and the latest Shopify and Wordpress plugins, I think both of them use Gatsby Image.

Missing onError handler for invocation 'building-schema', error was 'Error: Type with name "GatsbyImageLayout" does not exists'. Stacktrace was 'Error: Type with name "GatsbyImageLayout" does not exists

Is this related to this PR? Perhaps I have to "register the shared types?"

as per:

This requires the shared types to be registered somewhere

Edit: Yeah I had to install gatsby-plugin-image and register it as a plugin.

I'm not sure where would've been best to document this. Probably in upgrade guides for the plugins were causing these collisions. Slightly painful couple of hours. Could the error above be changed to include "please install gatsby-plugin-image"?