Adding imageSharp to query breaks page preview

After adding a imageSharp to the query the previews stopped working the page completely. I have learned that the previews do not work with imageSharp and you need to use a fallback.

query pageQuery($uid: String!, $lang: String!) {
  prismic {
    page(uid: $uid, lang: $lang) {
      title
      description
      theme
      _meta {
        type
      }
      body {
        ... on PRISMIC_PageBodyQuote {
          type
          primary {
            quote_name
            quote_body
            quote_image
            quote_imageSharp {
              childImageSharp {
                fluid(maxWidth: 400) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
}

While debugging I have found this:

NOTE Images are not transformed in preview mode, so be sure to fall back to the default image when the sharp image is null .

import Img from 'gatsby-image';
import get from 'lodash/get';

// ...

const sharpImage = get(data, 'prismic.Author.profile_pictureSharp.childImageSharp.fluid');
return sharpImage ? (
  <Img fluid={sharpImage} />
) : (
  <img src={get(data, 'prismic.Author.profile_picture.url')} />
);

Later, we may add an Image component that does this for you and leverages the new Prismic Image API as a fallback for preview modes.

This makes sense, yet I don’t understand why by just adding this snippet breaks the previews completly.

quote_imageSharp {
  childImageSharp {
    fluid(maxWidth: 400) {
      ...GatsbyImageSharpFluid
    }
  }
}

Here is my package.json, could it be that I have to upgrade some packages?

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "@loadable/component": "^5.13.1",
    "@tailwindcss/typography": "^0.2.0",
    "autoprefixer": "^9.8.0",
    "classnames": "^2.2.6",
    "gatsby": "^2.22.15",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.4.12",
    "gatsby-plugin-google-tagmanager": "^2.3.10",
    "gatsby-plugin-manifest": "^2.4.9",
    "gatsby-plugin-offline": "^3.2.7",
    "gatsby-plugin-postcss": "^2.3.4",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-purgecss": "^5.0.0",
    "gatsby-plugin-react-helmet": "^3.3.2",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-remove-trailing-slashes": "^2.3.11",
    "gatsby-plugin-sharp": "^2.6.18",
    "gatsby-source-filesystem": "^2.3.8",
    "gatsby-source-prismic-graphql": "^3.6.2",
    "gatsby-transformer-sharp": "^2.5.10",
    "postcss-import": "^12.0.1",
    "prismic-javascript": "^3.0.0",
    "prismic-reactjs": "^1.3.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-compare-image": "^3.0.2",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0",
    "react-intersection-observer": "^8.26.2",
    "react-scrollama": "^2.2.10",
    "swiper": "^6.0.4",
    "tailwindcss-fluid": "^0.2.0",
    "uid": "^1.0.0"
  },
  "resolutions": {
    "gatsby-source-graphql-universal": "3.3.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.3.0",
    "dotenv": "^8.2.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "2.0.5",
    "tailwindcss": "^1.4.6"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Hi Anton,

Thank you for posting on the Prismic community, I will try to help you with this,

Let’s start by updating your dependency of gatsby-source-prismic-graphql to the Prismic fork of the plugin as Birkir’s plugin is not maintained anymore.

Please let us know if that doesn’t solve the issue,
Fares

Hi Fares! Thanks for the tip. I have upgraded the gatsby-source-prismic-graphql, yet causes the following sources…

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "@loadable/component": "^5.13.1",
    "@prismicio/gatsby-source-prismic-graphql": "^3.6.11",
    "@tailwindcss/typography": "^0.2.0",
    "autoprefixer": "^9.8.0",
    "classnames": "^2.2.6",
    "gatsby": "^2.22.15",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.4.12",
    "gatsby-plugin-google-tagmanager": "^2.3.10",
    "gatsby-plugin-manifest": "^2.4.9",
    "gatsby-plugin-offline": "^3.2.7",
    "gatsby-plugin-postcss": "^2.3.4",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-purgecss": "^5.0.0",
    "gatsby-plugin-react-helmet": "^3.3.2",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-remove-trailing-slashes": "^2.3.11",
    "gatsby-plugin-sharp": "^2.6.18",
    "gatsby-source-filesystem": "^2.3.8",
    "gatsby-transformer-sharp": "^2.5.10",
    "postcss-import": "^12.0.1",
    "prismic-javascript": "^3.0.0",
    "prismic-reactjs": "^1.3.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-compare-image": "^3.0.2",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0",
    "react-intersection-observer": "^8.26.2",
    "react-scrollama": "^2.2.10",
    "swiper": "^6.0.4",
    "tailwindcss-fluid": "^0.2.0",
    "uid": "^1.0.0"
  },
  "resolutions": {
    "gatsby-source-graphql-universal": "3.3.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.3.0",
    "dotenv": "^8.2.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "2.0.5",
    "tailwindcss": "^1.4.6"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Solved the last error by:

const {

registerLinkResolver,

} = require("@prismicio/gatsby-source-prismic-graphql")

const { linkResolver } = require("./src/utils/linkResolver")

registerLinkResolver(linkResolver)

Still the top 3 error remain. 2 are related to chacing the other points to the wrong route. :thinking:

Hey Anton, about the Image sharp question you had. We have a dedicated article that covers this topic. You can find it here: Prismic Imgix Integration & Gatsby-Image

There, we explain why you don’t actually need to use the gatsby-transformer-sharp and gatsby-plugin-sharp plugins. Thanks to The Image Optimization feature all your images are now processed out of the box.

Take a look at the documentation and tell us if it works for you :star:

1 Like

Thanks @paulina.gavilan for the help, @anton did you manage to solve the other errors after the switch to Prismic fork of the plugin ?

Please let us know if you need any further help,
Fares

Thx for the help @Fares. I think updating the packages has solved the issue.

There are still some errors, yet I am not sure if they are related to the update.

The site works, I will investigate a bit further once I will have more time.

For example when I run “gatsby develop” I get this message:

@Fares I finally found some spare time to do a fresh install of the new prismic plugin (@prismicio/gatsby-source-prismic-graphql), to see if the errors mentioned above are related to me updating the plugin.

Unfortunately, I got a new set of errors…

Is there an example repo that I can fork and update the API_KEY without running into errors?
Otherwise, an example with package.json could help as well.

Cheers,
Anton

Hi @Fares,

I have stumbled upon this article:

" Our documentation for Gatsby was created around the gatsby-source-prismic-graphql plugin. We are now having certain problems with this plugin which we have discussed fully at length in this blog post. Now our current stance is that we recommend users not to build a new Prismic project with the gatsby-source-prismic-graphql plugin."

In the article it is recommended to switch to this plugin:

To be honest, this is a bit of a bummer… since this will become a fourth plugin that I will re-implement for this project…

Can you please confirm if previews are stable here (text, images)? Is there example repo with working code?

Hi Anton,

As I mentioned in this thread, the multisession preview can still work if you use our fork of gatsby-source-prismic-graphql that we are still maintaining.

As mentioned in the blog post shared before we don’t recommend this plugin for new projects.

If you need a plugin that is a future proof solution that is recommended by Prismic, then I would advise you to use the gatsby-source-prismic
Note that the multisession previews feature don’t work currently with this plugin.

Furthermore, if you need to use more stable SSR that works with multisession previews then I would advise you to use Next.js

Please let us know if you need any further assistance.

@Fares I think I have made this work. Thanks for the help! :raised_hands:

I have another question that is related to previews, yet unrelated to this issue. I will create a separate topic for this.

1 Like

Hi Anton,

Thanks for letting us know, and don’t hesitate to tag me in the new thread if you need my help.