GraphQl mutation wrong result

Question

I have some troubles with mutating data within Graphql. I am saving the origin image into my database and then mutating it with Graphql (external).

In the following points in the code I get the correct data

####################1111111111111111111#################### ####################222222222222222#################### ####################333333333333333####################

But at point

####################444444444444444444####################

after I mutate the data I am getting wrong image src. It is the edited image src and not the origin src I retrieved from database in my revertImages() function.

Although I pass the correct variable "newVariable" with correct data, the mutation takes over the mutation function edited data that I had previously passed, but takes over the newVariable data. Do I need to clear the cache maybe?

The newVariable data is:

{
  productId: 'gid://shopify/Product/6166892019882',
    image: {
    altText: '',
      id: 'gid://shopify/ProductImage/23268973543594',
        src: 'https://cdn.shopify.com/s/files/1/0508/3516/1258/products/180622-05-2.jpg?v=1611416719'
  }
}

After mutation the result is:

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

Here are my functions:

const revertImages = async (ctx) => {
  let dataToRevert = ctx.request.body.data;
  const { accessToken } = ctx.session;

  let productsDoc = await Product.find({ productId: { $in: dataToRevert.productId } });

  if (!productsDoc) {
    ctx.throw('Could not find products');
  }
  console.log('####################1111111111111111111####################');
  console.log(productsDoc);
  console.log('####################1111111111111111111####################');
  const res = await revertProductImages(productsDoc, accessToken);

  if (res) {
    console.log('Products reverted');
    ctx.response.status = 200;
  }
}

async function revertProductImages(products, accessToken) {
  console.log('Revert Product Images')
  return new Promise((resolve, reject) => {
    const map = {};
    let updateProduct = null;
    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
        }
      };

      console.log('####################222222222222222####################');
      console.log(variables);
      console.log('####################222222222222222####################');
      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..');

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

    if (res) {
      console.log('Image updated ✔️');
      console.log('####################444444444444444444####################');
      console.log(res.data.data);
      console.log('####################444444444444444444####################');
      resolve(res);
    } else {
      reject('Can not update image');
    }
  }).catch((err) => {
    console.log(err);
  });

}

Answer 1

Maybe I didn't understood correctly but here's an answer...

I cannot find the src property in available fields for this mutation (i'm not talking about the ImageInput but the image object).

Can you try with the following request:

mutation productImageUpdate($productId: ID!, $image: ImageInput!) {
  productImageUpdate(productId: $productId, image: $image) {
    image {
      id
      originalSrc
      transformedSrc
    }
    userErrors {
      field
      message
    }
  }
}

The docs says:

originalSrc : The location of the original image as a URL.

transformedSrc : The location of the transformed image as a URL.

Maybe what you are expecting is in originalSrc ?