[v4] Migrating to Prismic from V3 using Gatsby Shopify Starter

[DennisKraaijeveld]

Hi guys,

I am attempting to migrate from v3 to v4, but I am running into an error. I cant figure out what I should do, as I followed the migration guide..

Versions

"gatsby": "^3.10.2",
"gatsby-plugin-gatsby-cloud": "^2.10.0",
"gatsby-plugin-google-analytics": "^3.10.0",
"gatsby-plugin-image": "^1.10.1",
"gatsby-plugin-react-helmet": "^4.10.0",
"gatsby-plugin-sass": "^4.10.0",
"gatsby-plugin-sharp": "^3.10.2",
"gatsby-plugin-sitemap": "^4.6.0",
"gatsby-source-contentful": "^5.10.0",
"gatsby-source-filesystem": "^3.10.0",
"gatsby-source-prismic": "^4.0.2",
"gatsby-source-shopify": "rc",
"gatsby-transformer-sharp": "^3.10.0",
- node: v15.8.0

Reproduction

https://github.com/gatsbyjs/gatsby-starter-shopify When you install latest prismic v4.. you will get the same error.

Additional Details

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 (/Users/dennis/Documents/Projecten/vivhome/node_modules/graphql/type/schema.js:194:15)
    at SchemaComposer.buildSchema (/Users/dennis/Documents/Projecten/vivhome/node_modules/graphql-compose/lib/SchemaComposer.js:179:12)
    at buildSchema (/Users/dennis/Documents/Projecten/vivhome/node_modules/gatsby/src/schema/schema.js:80:33)
    at build (/Users/dennis/Documents/Projecten/vivhome/node_modules/gatsby/src/schema/index.js:110:18)
    at buildSchema (/Users/dennis/Documents/Projecten/vivhome/node_modules/gatsby/src/services/build-schema.ts:19:3)

Gatsby-config:

 {
      resolve: "gatsby-source-prismic",
      options: {
        repositoryName: "xx",
        accessToken:
          "xx.Ou-xx-xx-977-xx",

        linkResolver: (doc) => `/${doc.id}`,
        htmlSerializer: (type, element, content, children) => {
          // Your HTML Serializer
        },


        schemas: {
          // Your custom types mapped to schemas
          navigation: require("./src/schemas/navigation.json"),
          productpage: {
            productpage: require("./src/schemas/productpage.json"),
          },
        },
        lang: "*",
        imageImgixParams: {
          auto: "compress,format",
          fit: "max",
          q: 50,
        },
        imagePlaceholderImgixParams: {
          w: 100,
          blur: 15,
          q: 50,
        },
      },

Steps to reproduce

1. Git clone repo
2. Install latest Prismic and use your keys.
3. Gatsby Develop
4. Error on building schemes

What is expected?

I expect the dev environment to start up, but it doesnt

What is actually happening?

Runs into an error when building schemes..

[angeloashmore]

Hey @DennisKraaijeveld, that seems to be related to gatsby-plugin-image. As a quick test, can you trash your node_modules folder and reinstall?

Gatsby's GraphQL server can act unusual when it sees multiple version of graphql or types.

[DennisKraaijeveld]

Hi @angeloashmore I did remove the node_modules folder and run gatsby clean, but without any success..

[angeloashmore]

Thanks for checking @DennisKraaijeveld. I will take a look at this tomorrow. 👍

[DennisKraaijeveld]

Thanks!

[angeloashmore]

Thanks for being patient @DennisKraaijeveld. This is an issue with using multiple plugins that use gatsby-plugin-image.

In your case, gatsby-source-prismic and gatsby-source-shopify both include a gatsbyImageData field for image fields. Due to the way gatsby-plugin-image is built, Gatsby is unable to generate a working GraphQL schema when two plugins implement gatsbyImageData.

I've made the necessary changes to the upstream Gatsby source code. It will require review time and may require future discussion and work to modify its implementation. It may be a breaking change for some users so I do not expect the PR to be merged immediately.

Pull request: gatsbyjs/gatsby#32544

Until the root problem is addressed, you could use Prismic's Integration Fields to source Shopify data in your Prismic content. I understand this may not be a solution if your site is deeply integrated with Shopify.

I'll keep you updated!

[DennisKraaijeveld]

Thanks! So as far as I know right now, there isn't any way of using the plugins (V4 and Shopify) together? Or did you manage to got V4 to work with the gatsby shopify plugin? :)

[Casdak7]

I would really like to know as well. I'm facing apparently the exact same issue.

[moneal]

@angeloashmore

Until the root problem is addressed, you could use Prismic's Integration Fields to source Shopify data in your Prismic content. I understand this may not be a solution if your site is deeply integrated with Shopify.

This lacks options to getting some data in handy Shopify formats like variation prices and I haven't been able to get image helpers functioning yet.

[angeloashmore]

Hey @Casdak7 and @moneal, fixing this requires a change within gatsby-plugin-image which both the Prismic and Shopify plugins use. A PR with the fix has already been open but requires a review from and potentially some discussion with the Gatsby team.

Pull request: gatsbyjs/gatsby#32544

Feel free to comment on the PR to help push it along 😉.

[DennisKraaijeveld]

Issue has been solved. Thanks @angeloashmore

[angeloashmore]

Awesome! Thank you @DennisKraaijeveld for bringing this issue up. Glad it's working now. 🙂