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"
}
}
