Querying localFile on images from Prismic returns null

[Jere]

I'm trying to get localFile field from Prismic so I could use it with GatsbyImage, but it returns null.

Image showing query and its result:

Any clue what I might be doing wrong?

gatsby-config.js:

[Pau]

Hello @Jere, thanks for reaching out!

Seems like you're missing to add these plugins:

• gatsby-plugin-image
• gatsby-plugin-sharp
• gatsby-transformer-sharp

And the plugin configuration of the source plugin requires the shouldDownloadFiles option.

// Example gatsby-config.js file

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-prismic',
      options: {
        // Alongside your other options...
        shouldDownloadFiles: {
          // Download a Page `photo` image:
          'page.data.photo': true,
        },
      },
    },
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
  ],
}

Learn more in our dedicated docs:

Template Content with Gatsby

[Pau]

Hello team. We close the threads after a week with no new activity. If this happens and you want to continue the conversation, you can easily flag it to reopen it and add a new comment.
Thanks.

[Jere]

Ah I got it working! I did have the plugins, but missed shouldDownloadFiles. The documentation for it is a bit confusing, at first I didn't understand what page.data.photo was.

Is there any way to automatically download all the image files for local processing? The list could get long with many slices.

[Pau]

I don't believe you can retrieve all the images of your documents at once. You need to call them in each query.