How to make pageQuery for Images used in the layout?

[LarsEjaas]

Gatsby-plugin-image is really testing me here! Migrating to Gatsby V3 is really harder than I could ever imagine.

I have a sidebar on my page that runs consistently without any re-rendering when navigating the pages. It has a lot of images and the image path to these aren't accessible at build-time in the component - so I can't really use just Static-Image. But how do I make a pageQuery in my layout-file and how do I access the data?

My layout is in the layout.js and includes sidebar, footer and of course {children} = the individual pages.

I have tried various page-queries with and without names,

e.g.
export const query = graphql...
`

export const queryData = graphql...
`

export const queryLayout = graphql...
But I can't seem to access anything else than the page query from the individual pages? How do I do this?

This is an example query I have for an image, it works fine if I use it in one of the page files, but not in the layout.js file

export const query = graphql`
  query {
    letterImage: allFile(filter: {name: {eq: "hand_holding_letter"}}) {
          edges {
            node {
              childImageSharp {
                gatsbyImageData (
                      width: 231
                      placeholder: BLURRED
                      formats: [AUTO, WEBP, AVIF]
                      )
              }
            }
          }
        }
  }
`;

[LarsEjaas]

I ended up creating a special image component with a static GraphQL query that source all images in the "folder with images for the sidebar".

I did that by creating a reference to the folder in the gatsby-config file with "gatsby-source-filesystem".

You can then filter by "sourceInstanceName" in the graphQL query directly.

I then add the filename of the image as a prop to the image component. The component then filters through the image-files by name. Kind of "hacky" but I really couldn't figure out how to do this more elegant? I think Gatsby Image is a bit hard to work with for components where data is separated from the component coming from JSON or CMS?

I can't help thinking it should be easier to source images somehow? It would be nice if you somehow could point the component to a "gatsby-source-filesystem" name - this way the component would know exactly where to look for the image, even if the filename is passed as a prop from another component.

But I guess that would be kind of difficult to achieve...