gatsby-source-graphql@2.2.1 throws error: Cannot use GraphQLDirective "@include" from another module or realm

Description

While deploying a new site version where CI runs its own build for deployment, I am now running into a new error. When running gatsby develop, as it runs though plugin initialization, I am now getting the following error:

"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:

Cannot use GraphQLDirective "@include" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

  74 |     if (!sdl) {
  75 |       introspectionSchema = await introspectSchema(link);
> 76 |       sdl = printSchema(introspectionSchema);
     |             ^
  77 |     } else {
  78 |       introspectionSchema = buildSchema(sdl);
  79 |     }

File: node_modules/gatsby-source-graphql/gatsby-node.js:76:13

Which is followed by the following warning:

Error: Cannot use GraphQLDirective "@include" from another module or realm.
  Ensure that there is only one instance of "graphql" in the node_modules
  directory. If different versions of "graphql" are the dependencies of other
  relied on modules, use "resolutions" to ensure only one version is installed.
  https://yarnpkg.com/en/docs/selective-version-resolutions
  Duplicate "graphql" modules cannot be used at the same time since different
  versions may have different capabilities and behavior. The data from one
  version used in the function from another could produce confusing and
  spurious results.

Previous to this, the project was running gatsby-source-graphql@2.1.33. Downgrade is however not fixing the issue.

Steps to reproduce

List of installed dependencies, updated from hello-world starter:

├── @appbaseio/reactivesearch@3.7.1
├── @aws-amplify/api@2.2.0
├── @aws-amplify/auth@2.1.7
├── @aws-amplify/pubsub@1.3.3
├── @fortawesome/fontawesome-svg-core@1.2.28
├── @fortawesome/free-brands-svg-icons@5.13.0
├── @fortawesome/free-solid-svg-icons@5.13.0
├── @fortawesome/pro-regular-svg-icons@5.13.0
├── @fortawesome/react-fontawesome@0.1.9
├── @tailwindcss/custom-forms@0.2.1
├── gatsby@2.20.8
├── gatsby-image@2.3.1
├── gatsby-plugin-manifest@2.3.3
├── gatsby-plugin-offline@3.1.2
├── gatsby-plugin-postcss@2.2.1
├── gatsby-plugin-react-helmet@3.2.1
├── gatsby-plugin-sharp@2.5.3
├── gatsby-source-filesystem@2.2.2
├── gatsby-source-graphql@2.2.1
├── gatsby-transformer-sharp@2.4.3
├── prettier@2.0.2
├── prop-types@15.7.2
├── react@16.13.1
├── react-dom@16.13.1
├── react-headroom@3.0.0
├── react-helmet@5.2.1
├── tailwindcss@1.2.0
└── uuid@7.0.2

Configuration of plugin in gatsy-config.js:

{
      resolve: `gatsby-source-graphql`,
      options: {
        typeName: 'Book',
        fieldName: 'catalogue',
        url: 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
        headers: {
          'x-api-key': 'xxxxxx'
        }
      }
    }

Expected result

Previously, the plugin would run without issue and create the source nodes successfully

Actual result

When the plugin is initialized, it throws the error above.

Environment

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 10.19.0 - /usr/local/opt/node@10/bin/node
    npm: 6.13.4 - /usr/local/opt/node@10/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.149
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.20.8 => 2.20.8 
    gatsby-image: ^2.3.1 => 2.3.1 
    gatsby-plugin-manifest: ^2.3.3 => 2.3.3 
    gatsby-plugin-offline: ^3.1.2 => 3.1.2 
    gatsby-plugin-postcss: ^2.2.1 => 2.2.1 
    gatsby-plugin-react-helmet: ^3.2.1 => 3.2.1 
    gatsby-plugin-sharp: ^2.5.3 => 2.5.3 
    gatsby-source-filesystem: ^2.2.2 => 2.2.2 
    gatsby-source-graphql: ^2.3.0 => 2.3.0 
    gatsby-transformer-sharp: ^2.4.3 => 2.4.3 
  npmGlobalPackages:
    gatsby-cli: 2.8.28

[ohlr]

I get the same error whith the following npm ls graphql

├─┬ gatsby@2.20.36
│ ├─┬ gatsby-cli@2.11.22
│ │ └─┬ gatsby-recipes@0.0.19
│ │   └── graphql@14.6.0  deduped
│ └── graphql@14.6.0 
└─┬ gatsby-source-prismic-graphql@3.5.0
  ├─┬ gatsby-source-graphql@2.4.3
  │ └── graphql@14.6.0  deduped
  └─┬ gatsby-source-graphql-universal@3.1.11
    └─┬ @types/graphql@14.5.0
      └── graphql@15.0.

resolved it with https://github.com/birkir/gatsby-source-graphql-universal/issues/14

[jaredh159]

If you’re using npm 8.3.x or higher, you can now use:

"overrides": {
    "graphql": "14.6.0"
 }

…since npm doesn’t support resolutions