What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Update product variant images using gql

Solved

Update product variant images using gql

Jentsch
Shopify Partner
31 0 5

Hi, 

 

I am wondering how people are updating product variant images / media using gql? and whether they've been able to get this to work with bulk mutations?

 

If I look at the ProductVariantUpdate mutation - ref : https://shopify.dev/docs/api/admin-graphql/2024-04/mutations/productvariantupdate. This uses ProductVariantInput! but that input doesn't contain the "image" field. See below from postman:

 

 

{
    "errors": [
        {
            "message": "Variable $input of type ProductVariantInput! was provided invalid value for image (Field is not defined on ProductVariantInput)",
            "locations": [
                {
                    "line": 1,
                    "column": 31
                }
            ],
            "extensions": {
                "value": {
                    "id": "gid://shopify/ProductVariant/42218958487717",
                    "price": "15.99",
                    "image": {
                        "url": "https://dynamics365cdn.azureedge.net/cvt-0a9002324ad2b43f650151f995c0c5f32ba31cc363052b5da093aaca22ccb615/pictures/pages/what-is-dynamics365/Blade1_Hero.jpg"
                    }
                },
                "problems": [
                    {
                        "path": [
                            "image"
                        ],
                        "explanation": "Field is not defined on ProductVariantInput"
                    }
                ]
            }
        }
    ]
}

There is also the update variant images documentation found here: https://shopify.dev/docs/apps/online-store/media/product-variants but that looks like you need to 1) upload images, 2) retrieve the 'mediaid' 3) attach that to the variant. Is this the only way via graph? If it is, for those with hundreds/thousands/tens of thousands of variant updates are you just throttling gracefully? 

 

From the rest endpoint: https://shopify.dev/docs/api/admin-rest/2024-04/resources/product-image - it looks like you can both create a new image (via url rather than upload) and attach that directly to the variant in a single call. Is there an equivalent method that anyone has found? 


Thanks for your help!

Accepted Solution (1)
ShopifyDevSup
Shopify Staff
1453 238 525

This is an accepted solution.

Hey @Jentsch and @aliaz- ! Thanks for posting these questions and for your solutions @aliaz-

 

Just looking here, I can see that you're using the 2024-04 API version. As of that version, our product model has changed. If you haven't reviewed this already, I highly recommend it https://shopify.dev/docs/api/admin/migrate/new-product-model 

 

We also have a dedicated board here for questions specific to the new product API to help developers with the transition https://community.shopify.com/c/new-graphql-product-apis/bd-p/new-graphql-product-apis 

 

To the topic at hand, the new productVariantsBulkUpdate should work for your task. 

 

Here's an example of a working mutation, of uploading a new image from URL to the product and appending it to the variant within a single request.  

 

mutation ProductVariantsBulkUpdate {
   productVariantsBulkUpdate(
       variants: {
           id: "gid://shopify/ProductVariant/47363597074454"
           mediaSrc: "https://images.images.jpeg"
       }
       productId: "gid://shopify/Product/8015282962454"
       allowPartialUpdates: true
       media: {
           originalSource: "https://images.images.jpeg"
           mediaContentType: IMAGE
       }
   ) {
       product {
           id
       }
       productVariants {
           media(first: 10) {
               nodes {
                   id
                   ... on MediaImage {
                       alt
                       createdAt
                       fileStatus
                       id
                       mediaContentType
                       mimeType
                       status
                       updatedAt
                       fileErrors {
                           code
                           details
                           message
                       }                       
                   }
               }
           }
       }
   }
}
 

Let me know if that helps! I'm happy to dig in further here to find other ways to make this work and to pass feedback on to our product teams. 

 

- Kyle G. 

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 7 (7)

aliaz-
Excursionist
24 2 9

Yes i have solved this and many other advanced bulk operations as well. My code is dog **bleep** though, and i have forgot how i did it. I will spend time today, if i solve it (again) i will put feedback in my own thread regarding this and then go in here and link to that thread.
But basicly how it works is, i have a DB with the ID for each product. I use that ID to collect the current product_media_id (the product need to have a media file) then i use that newly gained media id to fetch the glocal media ID i then use the global media id to send a grahpQL update of the global media ID's.
It's a terrible solution and complex as hell but shopify dont ansver abny mails of forum post about media updates with graphql. The documentation is really bad.

The pessimist sees only the tunnel; the optimist sees the light at the end of the tunnel; the realist sees the tunnel and the light - and the next tunnel.

aliaz-
Excursionist
24 2 9

Here is an explanation on how i do it:
Re: Seeking Clarity on Bulk Product Updates via GraphQL - Shopify Community

I am not very good at forum posts but i tried my best with the time i have. I don't think you will like the answer very much.

I would love if more people could just that topic to talk about the bulk mutations soo that shopify staff could see it.

The pessimist sees only the tunnel; the optimist sees the light at the end of the tunnel; the realist sees the tunnel and the light - and the next tunnel.
ShopifyDevSup
Shopify Staff
1453 238 525

This is an accepted solution.

Hey @Jentsch and @aliaz- ! Thanks for posting these questions and for your solutions @aliaz-

 

Just looking here, I can see that you're using the 2024-04 API version. As of that version, our product model has changed. If you haven't reviewed this already, I highly recommend it https://shopify.dev/docs/api/admin/migrate/new-product-model 

 

We also have a dedicated board here for questions specific to the new product API to help developers with the transition https://community.shopify.com/c/new-graphql-product-apis/bd-p/new-graphql-product-apis 

 

To the topic at hand, the new productVariantsBulkUpdate should work for your task. 

 

Here's an example of a working mutation, of uploading a new image from URL to the product and appending it to the variant within a single request.  

 

mutation ProductVariantsBulkUpdate {
   productVariantsBulkUpdate(
       variants: {
           id: "gid://shopify/ProductVariant/47363597074454"
           mediaSrc: "https://images.images.jpeg"
       }
       productId: "gid://shopify/Product/8015282962454"
       allowPartialUpdates: true
       media: {
           originalSource: "https://images.images.jpeg"
           mediaContentType: IMAGE
       }
   ) {
       product {
           id
       }
       productVariants {
           media(first: 10) {
               nodes {
                   id
                   ... on MediaImage {
                       alt
                       createdAt
                       fileStatus
                       id
                       mediaContentType
                       mimeType
                       status
                       updatedAt
                       fileErrors {
                           code
                           details
                           message
                       }                       
                   }
               }
           }
       }
   }
}
 

Let me know if that helps! I'm happy to dig in further here to find other ways to make this work and to pass feedback on to our product teams. 

 

- Kyle G. 

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Jentsch
Shopify Partner
31 0 5

Hey @ShopifyDevSup ,

 

Thanks for taking the time to reply. My apologies about the lengthy delay here had to go work on some other projects. 

 

Just wanted to let you know that this method is working for me and does as intended. @aliaz-  This might suit you as well. 

 

Thanks again

 

Jake

Thomotron
Shopify Partner
7 0 3

This seems to work well when the variant doesn't already have media attached. However, when trying to replace existing media against a variant it doesn't seem to associate the new media with it; it's simply created against the product. Is this intentional?

LukaszWiktor
Shopify Partner
315 24 123

I've just encountered the same problem as @Thomotron. The ProductVariantsBulkUpdate mutation doesn't replace variant images when there are already images attached to variants. In such a case, the mutation only adds images to the parent product. Is this intentional or a bug?

I'm a software engineer. I make things happen automatically.
Check out my apps Exporteo, Fulfilleo, Stockeo, and Personal Discount.
Jentsch
Shopify Partner
31 0 5

Hi @Thomotron & @LukaszWiktor , 

Can't speak on behalf of Shopify back end code but to me this makes sense that it would 'add to' rather than 'replace' existing media. The variant isn't like a database where your doing an upsert and because it can have a lot of images etc attached to it an update method would just add to.

 

You'd need to handle a delete / unlink of the existing media and then follow the bulk update with the new media. 

 

Thanks