productImageUpdate sometimes not updating correctly?

[Anonymous]

Hi

I want to update the images for my products in bulk and use the GraphQl API productUpdateImage mutation from Shopify for this purpose. 

I have noticed that productImageUpdate API does not always work. The first time the update (calling productImageUpdate) and undo (calling productImageUpdate) works. 

If I repeat the step then somehow I am always the same image and that the point I guess it is not updating the image. 

I don't get any errors.  Is previous data held somewhere in the cache at Shopify and just gives me the last data out?

Can it be that if I call the mutation function very often it does not react? Maybe I need to bounce my calls?

Here are my functions:

async function revertProductImages(products, accessToken) {
  console.log('Revert Product Images')

  return new Promise(async (resolve, reject) => {
    const map = {};
    let variables = null;

    products.forEach(async (item) => {
      map[item.productId] = map[item.productId] + 1 || 1;
      variables = {
        "productId": `gid://shopify/Product/${item.productId}`,
        "image": {
          "altText": "",
          "id": `gid://shopify/ProductImage/${item.imageId}`,
          "src": item.originalSrc
        }
      };
      const updateProduct = await updateProductImage(UPDATE_PRODUCT_BY_ID, variables, accessToken);
      if (updateProduct) {
        const res = await removeProductFromDb(map);
        if (res) {
          resolve(res);
        }
      }
    });
  })
}

async function updateProductImage(queryName, variables, token) {
  console.log('updateProductImage..');
  console.log('==================')
  console.log(variables)
  console.log('==================')
  try {
    const res = await axios({
      headers: {
        'X-Shopify-Access-Token': token,
      },
      method: 'post',
      data: {
        query: queryName,
        variables: variables,
      },
      url: url,
    });
    if (res) {
      return new Promise((resolve, reject) => {
        resolve(res);
      })
    }
  } catch (err) {
    console.log(err.message);
  }
}

Graphql

const UPDATE_PRODUCT_BY_ID = `mutation ($productId: ID!, $image: ImageInput!) {
  productImageUpdate(productId: $productId, image: $image) {
    image {
      altText
      id
      src
    }
    userErrors {
      field
      message
    }
  }
}
`;

[_JB]

Hey @Anonymous,

This definitely sounds like some kind of caching is involved. Can you confirm that your app keeps the version parameter intact for Shopify CDN links? 

https://cdn.shopify.com/s/files/1/0001/4168/products/arbor-aframe-snowboard-m_3_large.jpg?v=1523625177

Shopify increments this version number whenever an asset is changed, and this causes the client requesting the resource to download it again from the CDN instead of using their cache. If this parameter is omitted, that would explain why you're seeing an old (cached) version after a 2nd attempt to update.

If you'd like us to take a closer look, please provide the X-Request-ID values for a set of calls that you experienced the issue with. As well please provide screenshots to show the asset that was served.

[Anonymous]

Hi

Examples with Screenshots:

The app should square and undo the image changes made with the app, e.g.

to

1. Request to square image (works)

x-request-id:

75664e3b-ddd2-403e-adfd-d7c5865c6b78

Proof:

Result:

{
  productImageUpdate: {
    image: {
      altText: 'Blue Silk Tuxedo',
      id: 'gid://shopify/ProductImage/23283560153258',
      src: 'https://cdn.shopify.com/s/files/1/0508/3516/1258/products/180622-05-2.jpg?v=1611710206'
    },
    userErrors: []
  }
}

2. Request undo changes (works)

x-request-id:

55a79f88-c607-42e7-aa62-2cc3ed7b3aa0

Proof:

Result:

{
  productImageUpdate: {
    image: {
      altText: null,
      id: 'gid://shopify/ProductImage/23283560153258',
      src: 'https://cdn.shopify.com/s/files/1/0508/3516/1258/products/180622-05-2.jpg?v=1611710683'
    },
    userErrors: []
  }
}

3. Request to square images (not works) 

x-request-id:

892d4f8a-a91f-4918-b17f-5082eed82418

Proof:

Expected Result:

Result:

{
  productImageUpdate: {
    image: {
      altText: 'Blue Silk Tuxedo',
      id: 'gid://shopify/ProductImage/23283560153258',
      src: 'https://cdn.shopify.com/s/files/1/0508/3516/1258/products/180622-05-2.jpg?v=1611710855'
    },
    userErrors: []
  }
}

[_JB]

Hey @Anonymous,

Our logs aren't showing any errors for those requests, in all 3 cases it shows the images were downloaded and updated successfully.

I also tested by making calls manually to my test store, but wasn't able to replicate. Is this app currently setup so I can install it on a test store? If so please provide instructions or an install URL, and I'll continue testing. If it's not setup somewhere that allows installing it on my test store, please provide a test shop URL or shop_id, and let me know if it's ok to do some tests there. Feel free to send any info in DM if you prefer.

[Anonymous]

Hi,

I have tweaked my app a bit, but the problem still seems to exist.
That would be cool if you look at it too. I could not find any error in the code until now. But will have another look at the request in the browser where the error occurs.

https://shopimageeditor.com/auth?shop={yourshop}.myshopify.com

It is in test mode and it the url should work. If not just let me know.

1)Open the app

2) Choose the source "All Products"  and follow the stepper and click on start.

I observe one product where my images looks like this:

3) Under scheduled task you see if the task is ready

4) After the task is completed the images should looks like this

5) Under scheduled tasks click on undo button and the images should be back in their original state

Repeat the steps at least 2x and observe the product with its images.

Thank you for your help

[_JB]

Hey @Anonymous,

I just tried to test but I'm not getting a response from that endpoint. Can you bring that up and let me know when I can try again?

[Anonymous]

What do you mean you are not getting a response from endpoint? It is strange but from my end it is working. Can you please record your screen or make a screenshot of it and share it here? Maybe there is an error in your browser console, network request status (if you are not getting any response) etc.. 

Don't know what I need to do from my end it is working and I tested it in private mode and Chrome or Mozilla.

Here is an video.

[_JB]

Hey @Anonymous,

Sorry there was a network issue on my end. I'm able to connect now, but I can't install since the app hasn't been reviewed. Do you mind if I use your test store to replicate?

[Anonymous]

Hi

Yes, please use a test store.

Because I am currently temporary blocked: Reasons the app would not square and no tasks appear under Scheduled tasks. . From my end it is working as you can see on video.. 

Just let me know what you need for replicate my test store..

Thanks for your support