shouldDownloadFiles gatsby source prismic

Developing with Prismic
1

Hi there,
I have some troubles to use the shouldDownloadFiles with slices in gatsby-config.js

 shouldDownloadFiles: {
          'creation.data.main_image': true,
          'creation.data.body.section_image.primary.image_data': true,
        }

It's working perfectly fine for an image outsitde a slice.

Here is the slice query :

... on PrismicCreationDataBodySectionImage {
            slice_label
            slice_type
            primary {
              image_data {
                localFile {
                  childImageSharp {
                    gatsbyImageData(
                      width: 3000
                      placeholder: DOMINANT_COLOR
                      formats: [AUTO, WEBP, AVIF]
                    )
                  }
                }
              }
            }
          }

Do you have any clue ?
Thanks!

2

Hi @ezoe ,

Are you getting any errors returned in your console?

4

Not a single error in my console.
If I do a console log with the data of this slice, it returns:
localFile : null

Maybe it's worth saying that I can use the slice twice in the page.

5

Hey @ezoe ,

I got some help from my team.

The shouldDownloadFiles object you posted looks correct. We confirmed in a test app that the option works for Slices as long as the config is correct.
The path you provided may be wrong. Could you share the JSON model for the “Creation” Custom Type? With that, we can verify if the path is correct and, if needed, provide the correct one.

Also, can you verify that localFile is null in every case of image_data? It will be null if the image field is empty.

Thanks.

6

The localFile is null in every cases.

Here is the graphql request with the related slice

query MyQuery {
  allPrismicCreation {
    edges {
      node {
        lang
        uid
        alternate_languages {
          id
          type
          lang
          uid
        }
        data {
          title {
            text
          }
          body {
            ... on PrismicCreationDataBodySectionImage {
              slice_label
              slice_type
              primary {
                image_data {
                  localFile {
                    childImageSharp {
                      gatsbyImageData(
                        width: 3000
                        placeholder: DOMINANT_COLOR
                        formats: [AUTO, WEBP, AVIF]
                      )
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

And the related json:

{
  "data": {
    "allPrismicCreation": {
      "edges": [
        {
          "node": {
            "lang": "fr-fr",
            "uid": "un-super-projet",
            "alternate_languages": [
              {
                "id": "YzQ5shEAACIAoKYt",
                "type": "creation",
                "lang": "en-us",
                "uid": "a-great-project"
              }
            ],
            "data": {
              "title": {
                "text": "Un super projet"
              },
              "body": [
                {},
                {},
                {},
                {
                  "slice_label": null,
                  "slice_type": "section-image",
                  "primary": {
                    "image_data": {
                      "localFile": null
                    }
                  }
                },
                {},
                {},
                {},
                {},
                {}
              ]
            }
          }
        },
        {
          "node": {
            "lang": "fr-fr",
            "uid": "un-autre-projet",
            "alternate_languages": [],
            "data": {
              "title": {
                "text": "Un autre projet"
              },
              "body": [
                {}
              ]
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}
7

So, the Slice’s name is section-image , not section_image (note the - ), which is probably the issue.

Could try this path instead? 'creation.data.body.section-image.primary.image_data': true,

8

thanks, this was the issue.
I have been confused since the image_data is in fact image-data in Prismic, so I thought it would be the same for section-image becoming section_image in the graphql query.

1 Like
9

Glad we could figure it out. :slight_smile: