Preprocessing External Images from S3

@lannonbr, I’m hoping you can help. I have a question regarding the documentation you wrote for ‘Preprocessing External Images’ #17385 , it’s quite a deviation from the example that you provided so ill provide some context.

I am building an e-commerce store, which contains products (obv), each of the product pages is created programmatically from gatsby-node. I have images for each of these products in an S3 bucket. The data for each product contains image1, which is the name (key) of the file in the S3 bucket.

const productQuery = `
query ($nextToken: String, $region: AWSAppSync_Region!, $productType: String!) {
    appSync {
        productsForCategory(
        region: $region,
        productTypeCategorySlugSubCategorySlugRatingsTotalSavingsVsRrpValue: {
            beginsWith: {
            productType: $productType
            }
        },
        nextToken: $nextToken
        ) {
        items {
            globalIdColor
            productType
            region
            categorySlug
            subCategorySlug
            image1
        }
        nextToken
        }
    }
}`;

I wish to attach the image as a File node to this product item in the GraphQL layer.

Currently, I request my images in what feels like a really wrong way. I gain access to my images using the gatsby-source-s3-image plugin. This allows me to access the images through allImageSharp. But then I need to match each product to an image. On each product page, I have an image component which is passed the ‘image1’ as props.filename.

export const Image = props => {

  return (
    <StaticQuery
      query={graphql`
      query {
        images: allImageSharp {
          edges {
            node {
                square: fluid(maxWidth: 300, quality: 100) {
                  ...GatsbyImageSharpFluid
                  originalName
                }
                thumbnailSizes: fluid(maxWidth: 256, quality: 100) {
                  ...GatsbyImageSharpFluid
                  originalName
                }
                largeSizes: fluid(maxWidth: 400, quality: 100) {
                  ...GatsbyImageSharpFluid
                  originalName
                }
            }
          }
        }
      } 
    `}
      render={data => {
        const image = data && data.images && data.images.edges && data.images.edges.find(n => {
          if (n.node.square.originalName && props.filename) {
            const key = n.node.square.originalName.toLowerCase();
            const filename = props.filename.toLowerCase();

            return key.includes(filename);
          }

          return false;
        });

        if (!image) {
          return (
            <ImageUnavailable />
          );
        }

        if (image) {
          return <Img  fluid={image.node.largeSizes} />;
        }
        if (props.thumbnail && image) {
          return <Img  fluid={image.node.thumbnailSizes} />;
        }
        if (props.blogPost && image) {
          return <Img  fluid={image.node.square} />;
        }
      }}
    />
  )
};

This only actually works 50% of the time even if the product key is in the S3 bucket, maybe something to do with this misuse of static query or that there is thousands of images. I’m hoping that if I can attach the image as a File node inside gatsby-node, then I can delete this ‘find and includes’ way of getting my product image.

So my question, how do I attach the image as a File node for each product item from a graphql request rather than on the creation of a MarkdownRemark type?

[LpmRaven]

Great, thanks @Js-Brecht! Got that all working, I can’t thank you enough.

[rwchampin]

Hey guys!

Ive been stuck on this for WEEEEKSSSSS. Thank you SO incredibly much.