How to improve gatsby image querying for specific images

Question

just curious about any solutions which would help to reduce the pressure on the images query inside the Gatsby website. Gatsby already gives a warning that images query takes too long (we have around 600 images inside the website and it is growing quite fast).

Ideally I would like to fetch just a specific image each time, but do not really want to create static queries for each of them.

As of now, my query inside Image component is like this:

    query={graphql`
      {
        images: allFile(filter: { sourceInstanceName: { eq: "images" } }) {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                gatsbyImageData(
                  quality: 100
                  layout: CONSTRAINED
                  placeholder: TRACED_SVG
                )
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(filename);
      });
      if (!image) {
        return null;
      }

      const imageAlt = filename.split('.')[0];
      return (
        <GatsbyImage
          image={image.node.childImageSharp.gatsbyImageData}
          className={className}
          style={styles}
          alt={alt ? alt : imageAlt}
          fadeIn={false}
        />
      );
    }}
  />

I just want to hear any solutions anyone came up to work with for larger image databases on Gatsby :)

It's much more scalable to simply use a CMS like Sanity that has good image hosting with an on-the-fly transformation API. Then you can just fetch the image IDs in your GraphQL and pass them to [gatsby-plugin-sanity-image](https://www.github.com/coreyward/gatsby-plugin-sanity-image) and have a full srcSet generated dynamically with each URL pointing to a server-rendered image that won't impact your build times. — coreyward, Nov 24 '21 at 21:28

Ferran Buireu · Answer 1 · 2021-11-24T12:13:05.523

0

In the way you are using your Image component, you are forced to query and fetch 600 images each time you request an image because of the use of the StaticQuery or useStaticQuery hook (because they don't accept dynamic parameters). So basically, you get all the load to filter it and get only the desired picture.

I guess your only option here is to get rid of the static query and fetch that image in a page query based on some filter that should be lifted using the context or manually in the desired page (or based on some other page field). This way would be far way more optimal than requesting 600 images to render only 1.

edited Nov 24 '21 at 12:13

answered Nov 24 '21 at 11:03

Ferran Buireu

28,630
6
39
67

Thanks for your answer, I am looking for a more dynamic solution at the moment. I am thinking about the Apollo integration to the Gatsby project and using the `useQuery` hook with dynamic args inside the `Image` component, so I can pass the image name and it will do a job. What do you think about it? Is it a good practice to integrate Apollo and Gatsby together? – Baivaras Nov 25 '21 at 10:55
If you are looking for a more "dynamic" integration using apollo is one way of achieving it. "Is it a good practice to integrate Apollo and Gatsby together?" Well, it depends on the needs. It's far way better than querying 600 images each time you need 1, it's a nice solution. However, depending on your project structure, it can be achieved using built-in filtering using context at the moment you create the page. – Ferran Buireu Nov 25 '21 at 11:23
Do you mean to fetch all the images once and then store them inside the context and filter it from there? – Baivaras Nov 25 '21 at 11:41
1

There's a lack of code/project structure. But at the time you are creating the pages in Gatsby, you have a context available. There you can send any value to the view that will allow you to query and filter using that value (context) so at the moment you query for the page data, you can fetch also the image(s) needed using those values, avoiding the use of the static query, using a page query (https://www.gatsbyjs.com/docs/creating-and-modifying-pages/ and https://www.gatsbyjs.com/docs/how-to/querying-data/page-query/). The approach is similar to the one described by @coreyward in the comment – Ferran Buireu Nov 25 '21 at 11:47

How to improve gatsby image querying for specific images

1 Answers1