@builder.io/gatsby support v4

[codercatdev]

When installing on new Gatsby the plugin fails because of version support.

[gavlyin]

My case, the plugin doesn't fail, but I can't query allBuilderModels.

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allBuilderModels" on type "Query".

If you don't expect "allBuilderModels" to exist on the type "Query" it is most
likely a typo.
However, if you expect "allBuilderModels" to exist there are a couple of
solutions to common problems:

- If you added a new data source and/or changed something inside
gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in
GraphiQL and use the GraphiQL explorer to see which fields you can query and
what shape they have
- You want to optionally use your field "allBuilderModels" and right now it is
not used anywhere. Therefore Gatsby can't infer the type and add it to the
GraphQL schema. A quick fix is to add at least one entry with that field ("dummy
 content")

It is recommended to explicitly type your GraphQL schema if you want to use
optional fields. This way you don't have to add the mentioned "dummy content".
Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#
creating-type-definitions

[gavlyin]

Even after @builder.io/gatsby@2.0.6-15
I can run yarn develop successfully without builder.io package installed, otherwise I am not able to run with the package in gatsby 4.

ERROR #11321  PLUGIN

"@builder.io/gatsby" threw an error while running the createSchemaCustomization
lifecycle:

Cannot use GraphQLObjectType "RootQueryType" 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.

  204 |     if (!sdl) {
  205 |       introspectionSchema = await
introspectSchema(linkToExecutor(link));
> 206 |       sdl = printSchema(introspectionSchema);
      |             ^
  207 |     } else {
  208 |       introspectionSchema = buildSchema(sdl);
  209 |     }

File: node_modules/@builder.io/gatsby/gatsby-node.js:206:13



  Error: Cannot use GraphQLObjectType "RootQueryType" from another module or rea
  lm.
  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.
  
  - Array.map
  
  - gatsby-node.js:206 Object.exports.createSchemaCustomization
    [bubsdev]/[@builder.io]/gatsby/gatsby-node.js:206:13
  
  - task_queues.js:95 processTicksAndRejections
    internal/process/task_queues.js:95:5
  
  - api-runner-node.js:462 runAPI
    [bubsdev]/[gatsby]/src/utils/api-runner-node.js:462:16
  

success createSchemaCustomization - 1.939s

Here's the package.json file on our side.

"dependencies": {
    "@builder.io/gatsby": "2.0.6-15",
    "@builder.io/react": "^1.1.47",
    "@contentful/rich-text-react-renderer": "^15.11.0",
    "@contentful/rich-text-types": "^15.11.0",
    "@emotion/core": "^10.0.5",
    "@loadable/component": "^5.15.2",
    "@nacelle/client-js-sdk": "^3.6.0",
    "@nacelle/gatsby-source-nacelle": "^7.0.1",
    "@nacelle/react-components": "^7.0.0",
    "@nacelle/react-dev-utils": "^7.0.0",
    "@nacelle/react-hooks": "^7.0.0",
    "@nacelle/react-recharge": "^7.0.0",
    "@nacelle/shopify-checkout": "^0.0.8",
    "@react-hook/media-query": "^1.1.1",
    "@sentry/gatsby": "^6.17.2",
    "autoprefixer": "^10.2.5",
    "axios": "^0.19.2",
    "buffer": "^6.0.3",
    "change-case": "^4.1.2",
    "classnames": "^2.3.1",
    "fuse.js": "^6.4.1",
    "gatsby": "^4.4.0",
    "gatsby-alias-imports": "^1.0.6",
    "gatsby-plugin-brotli": "^2.1.0",
    "gatsby-plugin-client-side-redirect": "^1.1.0",
    "gatsby-plugin-emotion": "4.5.0",
    "gatsby-plugin-facebook-pixel": "^1.0.8",
    "gatsby-plugin-google-tagmanager": "^4.4.0",
    "gatsby-plugin-image": "^2.6.0",
    "gatsby-plugin-manifest": "^4.4.0",
    "gatsby-plugin-offline": "^5.6.0",
    "gatsby-plugin-postcss": "^5.4.0",
    "gatsby-plugin-purgecss": "^6.1.0",
    "gatsby-plugin-react-helmet": "^5.4.0",
    "gatsby-plugin-redirect-to": "^1.0.2",
    "gatsby-plugin-robots-txt": "^1.6.8",
    "gatsby-plugin-scroll-reveal": "0.0.7",
    "gatsby-plugin-sharp": "^4.4.0",
    "gatsby-plugin-sitemap": "^5.4.0",
    "gatsby-plugin-transition-link": "^1.20.5",
    "gatsby-plugin-webfonts": "^2.2.1",
    "gatsby-source-filesystem": "^4.4.0",
    "gatsby-transformer-sharp": "^4.4.0",
    "graphql": "^16.2.0",
    "graphql-compose": "^9.0.6",
    "gsap": "^3.6.1",
    "html-react-parser": "^1.4.4",
    "js-base64": "^3.7.0",
    "nuka-carousel": "^4.8.4",
    "numeral": "^2.0.6",
    "pluralize": "^8.0.0",
    "postcss": "^8.4.5",
    "query-string": "^7.0.1",
    "react": "^17.0.2",
    "react-alice-carousel": "^2.5.1",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-notifications": "^1.7.3",
    "react-typed": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
    "eslint": "^8.3.0",
    "eslint-plugin-react": "^7.20.5",
    "eslint-plugin-react-hooks": "^4.0.8",
    "gatsby-plugin-remove-trailing-slashes": "^4.6.0",
    "lint-staged": "^12.1.2",
    "tailwindcss": "2.2.19"
  },
  "engines": {
    "node": ">=14.15.0"
  },
  "lint-staged": {
    "**/**/*.(js|ts|tsx)": [
      "prettier --write",
      "eslint",
      "git add"
    ],
    "*{json, md}": [
      "prettier --write"
    ]
  },
  "resolutions": {
    "graphql": "^15.4.0",
    "graphql-compose": "^7.25.0",
    "webpack": "^5.24.2"
  },
  "cli": {
    "packageManager": "yarn"
  }

[teleaziz]

Thanks for the detailed report @gavlyin , working on a solution, it'd help if you have a repo with a reproduction, I'll try to reproduce on my own as well.

[gavlyin]

@teleaziz Thanks. Please ping me if you want any help.

[codercatdev]

Should be fixed with #762

[gavlyin]

Should be fixed with #762

@codercatdev That worked. Thanks!

[gavlyin]

I am still seeing this warning though!

warn Plugin @builder.io/gatsby is not compatible with your gatsby version 4.8.0
- It requires gatsby@^2.0.15 || ^3.0.0

[teleaziz]

@gavlyin I just released a new major version try:

npm install @builder.io/gatsby@latest

[Ash-Matter]

Just a heads up, after installing the latest on my project that I'm attempting to update to Gatsby 4, which happens to also use gatsby-source-graphql directly, I got the following error:

Sounds like its been a long standing issue among other plugins too:
gatsbyjs/gatsby#20599
and it appears that the plugins that hit this issue were able to rectify it on their end by overriding/defining the internal type (a direct example of this: https://github.com/directus/directus/pull/10422/files#diff-f4c96b6691b6383928288f313ac8960a883c3e9475e9db0cf2ad9246215cd04dR46)

However, taking a peak at the source code, I think you can get away pretty easily by changing this value:
https://github.com/BuilderIO/builder/blob/main/packages/gatsby/src/gatsby-node.js#L266
To something like BuilderGraphQLSource

I created a patch-package patch file to confirm this: @builder.io+gatsby+3.0.0.patch

diff --git a/node_modules/@builder.io/gatsby/gatsby-node.js b/node_modules/@builder.io/gatsby/gatsby-node.js
index 60b7a48..cf7128c 100644
--- a/node_modules/@builder.io/gatsby/gatsby-node.js
+++ b/node_modules/@builder.io/gatsby/gatsby-node.js
@@ -320,7 +320,7 @@ function createSchemaNode({
     parent: null,
     children: [],
     internal: {
-      type: `GraphQLSource`,
+      type: `BuilderGraphQLSource`,
       contentDigest: nodeContentDigest,
       ignoreType: true
     }

which I can confirm bypasses the issue originally met and successfully builds the site as expected.

[teleaziz]

@Ash-Matter , addressed the conflict in 3.0.1, thanks so much for the detailed report and the fix