Using different options for different images with gatsby-plugin-image

[robotzero1]

I'm using the new gatsby-plugin-image with gatsby-source-mysql something like the code pasted below.

I want to use different options for the two images.

Is there some way to access the two objects in mysqlImages? mysqlImages[0] and mysqlImages[1} doesn't work.

remoteImageFieldNames: ['venue_photo_ref','offer_photo_ref']

and

import * as React from "react";
import { graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import Layout from "../components/layout";

const Offer = ({ data }) => {
  const venueImage = getImage(data.mysqlOfferDetail.mysqlImages[0])
  const offerImage = getImage(data.mysqlOfferDetail.mysqlImages[1])  
  return (
    <Layout>
     <div>
      <GatsbyImage image={venueImage} alt={data.mysqlOfferDetail.venue_name} />
      <GatsbyImage image={offerImage} alt={data.mysqlOfferDetail.offer_title} />
      </div>
    </Layout>
  );
};

export const query = graphql`
query($offerID: Int!) {
    mysqlOfferDetail(offer_active: {eq: 1}, id_offer: {eq: $offerID}) {
        offer_title
        venue_name
        mysqlImages {
          childImageSharp {
            gatsbyImageData(
              width: 200
            )
          }
        }  
    }
}
`;

[malcolm-kee]

Hey thanks for raising the issue, but I didn't update this plugin after the gatsby v3 release, so that probably not working.

[robotzero1]

Oh.. I've not explained properly.

The code above does work but I want to be able to control the options for the two image objects in the query to give them separate options.

I tried this but it doesn't work. Probably I don't know what I'm doing!

        mysqlImages[0] {
          childImageSharp {
            gatsbyImageData(
              width: 400
            )
          }
        }
        mysqlImages[1] {
          childImageSharp {
            gatsbyImageData(
              width: 200
            )
          }
        }

[malcolm-kee]

@robotzero1 u can do something like this

mysqlImageOne: mysqlImages {
          childImageSharp {
            gatsbyImageData(
              width: 400
            )
          }
        }
        mysqlImageTwo: mysqlImages {
          childImageSharp {
            gatsbyImageData(
              width: 200
            )
          }
        }

[robotzero1]

I'd tried something like that but I couldn't get it to work. However I discovered I can run more than one query in a component so instead of joining tables etc I just run two queries using query variables. I've pasted the code below.

I wanted to say a big thanks for creating this plugin because the two things it does (mysql access and pulling in remote images) has saved me a lot of work.

Detail page (venue image and offer image)

const Offer = ({ data }) => {
  const offer = data.offer;
  const venue = data.venue;
  const offerImage = getImage(offer.mysqlImage);
  const venueImage = getImage(venue.mysqlImage);
  return (
    <Layout>
      <h1>Offer Detail</h1>
      Venue: {venue.venue_name}
      <GatsbyImage image={venueImage} alt={venue.venue_name} />
      <div>
        <div>
          <GatsbyImage image={offerImage} alt={offer.offer_title} />

          <div>OFFER:</div>
          <div>{offer.offer_title}</div>
          <div>{offer.offer_desc}</div>
        </div>
      </div>
    </Layout>
  );
};

export const query = graphql`
  query ($offerID: Int!, $venueID: Int!) {
    offer: mysqlOffers(offer_active: { eq: 1 }, id_offer: { eq: $offerID }) {
      offer_title
      offer_desc
      mysqlImage {
        childImageSharp {
          gatsbyImageData(
            width: 200
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
    venue: mysqlVenues(venue_active: { eq: 1 }, id_venue: { eq: $venueID }) {
      venue_name
      mysqlImage {
        childImageSharp {
          gatsbyImageData(
            width: 400
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
  }
`;

Offers page (category image and list of offer images)

const Offers = ({ data }) => {
  const category = data.category;
  const offers = data.offers;
  const categoryImage = getImage(category.mysqlImage);

  return (
    <Layout>
      <GatsbyImage image={categoryImage} alt={category.category_name} />  
      <h1>Offers in Category</h1>
      <div>
        {offers.edges.map(({ node }, index) => (
          <div key={index}>
            <Link to={"/" + node.fields.slug}>
              <GatsbyImage image={node.mysqlImage.childImageSharp.gatsbyImageData} alt={node.offer_title} />
              <div>{node.offer_title}</div>
              <div>{node.offer_desc}</div>
            </Link>
          </div>
        ))}
      </div>
    </Layout>
  );
};

export const query = graphql`
  query ($categoryID: Int!) {
    category: mysqlOfferCats(  category_active: { eq: 1 }, id_category: { eq: $categoryID }  ) {
      category_name
      mysqlImage {
        childImageSharp {
          gatsbyImageData(
            width: 600
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
    offers: allMysqlOffers(
      filter: { offer_active: { eq: 1 }, category_id: { eq: $categoryID } } ) {
      edges {
        node {
          offer_title
          offer_desc
          mysqlImage {
            childImageSharp {
              gatsbyImageData(
                width: 200
                placeholder: BLURRED
                formats: [AUTO, WEBP, AVIF]
              )
            }
          }
          fields {
            slug
          }
        }
      }
    }
  }
`;