Querying localFile on images returns null/wrong shouldDownloadFiles config

Developing with Prismic
1

I want to query an image, but it only returns null.
I think i put the wrong path inside the shouldDownloadFiles section.

Gatsby Config:

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "algo-project",
  },
  plugins: [
    "gatsby-plugin-emotion",
    "gatsby-plugin-image",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        icon: "src/images/icon.png",
      },
    },
    "gatsby-plugin-mdx",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: "./src/pages/",
      },
      __key: "pages",
    },
    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        schemas: {
          homepage: require('./custom_types/homepage.json'),
          links: require('./custom_types/links.json'),
          category: require('./custom_types/category.json'),
          main_categorys: require('./custom_types/main_categorys.json'),
          about: require('./custom_types/about.json'),
        },
        customTypesApiToken: process.env.PRISMIC_CUSTOM_TYPES_API_TOKEN,
        releseID: process.env.PRISMIC_RELEASE_ID,
        linkResolver: require('./src/utils/linkResolver').linkResolver,
        shouldDownloadFiles: {
          'page.data.hero_img': true,
          'about.data.hero_img': true,
          'prismicAbout.data.hero_img': true,
          'data.about.data.hero_img': true,
          'data.prismicAbout.data.hero_img': true,
        }     
      },
    },
  ],
};

GraphQL - PageQuery:

export const pageQuery = graphql`
query AboutQuery {
    about: prismicAbout {
       
          data {
            about_text {
              text
            }
            title {
              text
            }
            images_portraits {
              portrait {
                localFile {
                  childImageSharp {
                    gatsbyImageData(
                        width: 1000
                        placeholder: BLURRED
                        formats: [AUTO, WEBP, AVIF]
                    )
                  }
                }
                alt
              }
            }
            hero_image {
              localFile {
                childImageSharp {
                  gatsbyImageData(
                    width: 1000
                    placeholder: BLURRED
                    formats: [AUTO, WEBP, AVIF]
                )
                }
              }
              alt
            }
          }
        }
      
}
`

packege.json:

 "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@fontsource/roboto": "^4.5.1",
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "@mui/icons-material": "^5.2.0",
    "@mui/material": "^5.2.2",
    "gatsby": "^4.2.0",
    "gatsby-plugin-emotion": "^7.2.0",
    "gatsby-plugin-image": "^2.2.0",
    "gatsby-plugin-manifest": "^4.2.0",
    "gatsby-plugin-mdx": "^3.2.0",
    "gatsby-plugin-react-helmet": "^5.2.0",
    "gatsby-plugin-sharp": "^4.2.0",
    "gatsby-plugin-sitemap": "^5.2.0",
    "gatsby-source-filesystem": "^4.2.0",
    "gatsby-source-prismic": "^5.2.2",
    "gatsby-transformer-sharp": "^4.2.0",
    "prismic-reactjs": "^1.3.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0"

image
image1920×1205 79.3 KB

3

Hey there, seems like you're adding an incorrect API ID in the config file, It should be about.data.hero_image instead of about.data.hero_img.