Graphql varian images not working if not in product image

Retired Boards Appdev Graphql Basics And Troubleshooting
1

When using graphql api to create a product with multiple variants, I have noticed that only the first variant will have an image, while the second, and following one will always be broken.

Here an example of the query I generate to create the product with its 2 variants:

mutation {productCreate(input: {id:null,title:"Colorful - Maldive - Red",published:true,descriptionHtml:"Womens bifold RFID wallet made in multicolor leather with button closure and external coin carrier.",status:ACTIVE,metafields:[{key:"width",id:null,namespace:"custom",value:"11",type:"single_line_text_field"},{key:"height",id:null,namespace:"custom",value:"14",type:"single_line_text_field"},{key:"depth",id:null,namespace:"custom",value:"3.5",type:"single_line_text_field"},{key:"short_description",id:null,namespace:"custom",value:"Brand:\u00a0DuDu\u00ae Material:\u00a0soft Calfskin Dimension (wallet closed):\u00a011 x 14 x 3,5 cm Weight: 132 g Box:\u00a0Included Type:\u00a0Ladies Composition:\u00a09 credit cards pockets, 2 money paper pockets, 1 coin purse and 1 transparent photo sections and extra more document holder Available colors: Black, Dark brown, Red, Navy, Burgundy, Fuchsia, Blue, Mauve, Woods, Mangrove. All multicolour",type:"single_line_text_field"}],images:[{src:"https:\/\/cdn.dudubags.com\/media\/catalog\/marketplace\/p\/o\/portafoglio-donna-534-1161-a-red.jpg"},{src:"https:\/\/cdn.dudubags.com\/media\/catalog\/marketplace\/p\/o\/portafoglio-donna-534-1161-a-red.jpg"},{src:"https:\/\/cdn.dudubags.com\/media\/catalog\/marketplace\/p\/o\/portafoglio-donna-534-1161-d-red.jpg"},{src:"https:\/\/cdn.dudubags.com\/media\/catalog\/marketplace\/p\/o\/portafoglio-donna-534-1161-b-red.jpg"}],variants:[{id:null,sku:"534116106",barcode:"8031847129953",price:75,weight:132,options:"Red",inventoryQuantities:[{availableQuantity:0,locationId:"gid:\/\/shopify\/Location\/36809048195"}],inventoryItem:{tracked:true,cost:null},imageSrc:"https:\/\/cdn.dudubags.com\/media\/catalog\/marketplace\/p\/o\/portafoglio-donna-534-1161-a-red.jpg"},{id:null,sku:"534116155",barcode:"8031847155693",price:75,weight:132,options:"Woods",inventoryQuantities:[{availableQuantity:0,locationId:"gid:\/\/shopify\/Location\/36809048195"}],inventoryItem:{tracked:true,cost:null},imageSrc:"https:\/\/cdn.dudubags.com\/media\/catalog\/marketplace\/p\/o\/portafoglio-donna-534-1161-55-A-woods.jpg"}],options:["Color"],tags:["Woman"],vendor:null}) {
                  userErrors {
                    field
                    message
                  }
                  product {
                    id
                  }
                }}

As you might have noticed I have 2 variants, both of them with a proper imageSrc. Everything works fine, a part from the images in the admin and storefront:

Screenshot 2023-05-31 at 16.43.37.png
Screenshot 2023-05-31 at 16.43.37.png1346×598 44.9 KB

The issue seems to be that if we don’t send the variant image in the product image array, the image won’t work.

Is this a normal behaviour ?

Can’t I have the variant images just in the images ?

2

Hi @soipo ,

Thanks for your post. For the second variant’s image, that particular file URL is not included in the images on the Product itself, so ensuring the variant image is added in the main product images section as well as the variant’s image section should resolve the issue.

The docs for ProductVariantInput.imageSrc describe it like this:

imageSrc: The URL of an image to associate with the variant. This field can only be used through mutations that create product images and must match one of the URLs being created on the product.

Hope you have a great day,
Jon551

3

@ShopifyDevSup I guessed so, but If in the UI I can add a variant image without adding it to the product, I found strange that through apis I cannot do the same .