I have seen this topic before and I can't happen to find any answers to my issue. Like others, I am unable to get any values when trying to use localFile. I am trying to download images locally with the shouldDownloadFiles option for gatsby-source-prismic. I am trying to preload dynamic images with gatsby-plugin-image.
The project I am working on is a single page app with nested components. I am thinking the image path in graphql I am using is incorrect.
gatsby-config.js
plugins: [
"gatsby-plugin-image",
"gatsby-plugin-sitemap",
"gatsby-transformer-sharp",
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-plugin-sharp`,
options: {
defaults: {
formats: [`auto`, `webp`],
placeholder: `blurred`,
quality: 50,
breakpoints: [768, 1024, 1440, 1920],
}
}
},
{
resolve: 'gatsby-source-prismic',
options: {
repositoryName: 'example-repo-name',
linkResolver: require('./src/utils/LinkResolver').linkResolver,
schemas: {
hero: require('./custom_types/hero.json'),
contact_form: require('./custom_types/contact_form.json'),
header: require('./custom_types/header.json'),
homepage: require('./custom_types/homepage.json'),
section: require('./custom_types/section.json'),
socials: require('./custom_types/socials.json'),
footer: require('./custom_types/footer.json'),
interstitial: require('./custom_types/interstitial.json'),
form: require('./custom_types/form.json'),
navigation: {},
page: {}
},
shouldDownloadFiles: {
'home.data.hero.data.hero_background_mobile': true,
'home.data.hero.document.data.hero_background_mobile': true,
'prismicHomepage.data.hero.document.data.hero_background_mobile': true,
'header.data.logo_image': true,
'prismicHeader.data.logo_image': true
}
},
},
index.js
export const query = graphql`
query Home {
interstitial: prismicInterstitial {
data {
interstitial_copy {
richText
}
}
}
home: prismicHomepage {
data {
hero {
document {
... on PrismicHero {
id
data {
hero_background_image {
url
}
hero_background_embed {
text
}
hero_background_embed_tablet {
text
}
hero_background_embed_desktop {
text
}
hero_background_mobile {
localFile {
childImageSharp {
gatsbyImageData
}
}
}
hero_background_tablet {
url
}
hero_background_desktop {
url
}
}
}
}
}
homepage_sections {
homepage_section {
document {
... on PrismicSection {
id
uid
data {
section_title {
text,
richText
}
show_section_title
section_header_link {
text
}
section_background_image{
url
}
section_disclaimer {
richText
}
full_width
section_overlay
form_section
body{
... on PrismicSliceType {
slice_type
}
...SectionDataBodyCarousel
...SectionDataBodyCenteredLogo
...SectionDataBodyContentBlock
...SectionDataBodyFullBackgroundWCta
...SectionDataBodyList
...SectionDataBodyEvents
...SectionDataBodyTwoThirdsBackground
...SectionDataBodyVenue
...SectionDataBodyForm
}
}
}
}
}
}
}
}
}
`;
I also tried a simpler query such as the header which does not have nested components.
Header.js
const queryResults = useStaticQuery(graphql`
query Header {
header: prismicHeader {
data {
logo_image {
localFile {
childImageSharp{
gatsbyImageData
}
}
}
navigation_sections {
navigation_section {
document {
... on PrismicSection {
id
uid
data {
section_title {
text
}
section_header_link {
text
}
sub_navigation {
sub_nav_title {
text
}
sub_nav_section {
document {
... on PrismicSection {
id
uid
data {
section_header_link {
text
}
}
}
}
}
}
}
}
}
}
}
}
}
}
`);
I tried testing in graphql as well to see if any values are coming through and was unable to get anything.
