Wrong order of obtaining product images

Retired Boards Appdev Customers Discounts And Orders
1

Hello! There is a problem with getting products when using the graphql Admin API: the order of the images does not match the order configured in the admin panel. Gatsby.js is used as a client. What could cause the problem?

2

Hey @Developer07

I couldn’t be 100% sure actually without checking the logs - by any chance are you logging an x-request_id? Supplying that could help us try to figure out what’s happening. Please feel free to share the query you’re making, that would help. Thanks!

3 
query($handle: String!) {
   collection: shopifyCollection(handle: { eq: $handle }) {
      handle
      description
      descriptionHtml
      title
      image {
         localFile {
            childImageSharp {
               gatsbyImageData
            }
         }
         originalSrc
      }
      storefrontId
      metafields {
         key
         value
      }
      products {

      }
   }
   products: allShopifyProduct{
      edges {
         node {
            ...ProductCard
         }
      }
   }
}

I use fragment for product item:


fragment ProductCard on ShopifyProduct {
   id
   handle
   tags
   title
   description
   descriptionHtml
   storefrontId
   productType
   options {
      name
      values
      id
   }
   priceRangeV2 {
      maxVariantPrice {
         amount
         currencyCode
      }
      minVariantPrice {
         amount
         currencyCode
      }
   }
   metafields {
      key
      value
   }
   images {
      id
      originalSrc
      altText
      localFile {
         childImageSharp {
            gatsbyImageData
         }
      }
   }
   variants {
      availableForSale
      storefrontId
      image {
         id
         altText
         localFile {
            childImageSharp {
               gatsbyImageData
            }
         }
         originalSrc
      }
      metafields {
         key
         value
      }
      price
      title
   }
}
4

Hey @Developer07

Thanks! So, I’d been looking at ProductImageSortKeys(here in our GraphQL docs) which seemed like it could help you and allow you to sort the images but it’s not available as something to use in the Gatsby client.

Alas, without a request ID I won’t be able to see the underlying reason for the ordering. Yet I do note, that this behaviour you’d seen has been logged as an issue in the Gatsby Repo itself; as somebody else had been testing the Admin API in April and seeing the same. Feel free to check out the issues here and the further discussion here (it’s a feature request).