productAppendImages creates invalid JSON response

[strocode]

Hello,

When I create a GraphQL mutation to append images to a product in the Shopify GraphQL app, I get a message back saying "message": "The server responded with invalid JSON, this is probably a server-side error". How do I fix this Query?

Here is the mutation

mutation ($input: ProductAppendImagesInput!) {
  productAppendImages(input: $input) {
    userErrors {
      field
      message
    }
    newImages {
      id
    }
    product {
      id
    }
  }
}

And here are the query variables

{"input":{"id":"gid://shopify/Product/6637799276717", "images":[{"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/070/original/FP9901.2.jpeg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/071/original/FP9901.3.jpeg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/072/original/FP9901.4.jpeg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/073/original/DSC_1934.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/074/original/DSC_1935.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/075/original/DSC_1936.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/076/original/DSC_1937.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/077/original/DSC_1938.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/078/original/DSC_1939.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/079/original/DSC_1940.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/080/original/DSC_1941.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/081/original/DSC_1942.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/082/original/DSC_1943.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/083/original/DSC_1944.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/084/original/DSC_1945.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/085/original/DSC_1946.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/086/original/DSC_1947.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/087/original/DSC_1948.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/088/original/DSC_1949.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/089/original/DSC_1950.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/090/original/DSC_1951.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/091/original/DSC_1952.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/092/original/DSC_1953.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/093/original/DSC_1954.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/094/original/DSC_1955.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/095/original/DSC_1956.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/096/original/DSC_1957.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/097/original/DSC_1958.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/098/original/DSC_1959.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/099/original/DSC_1960.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/100/original/DSC_1961.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/101/original/DSC_1962.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/102/original/DSC_1963.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/103/original/DSC_1964.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/104/original/DSC_1965.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/105/original/DSC_1966.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/106/original/DSC_1967.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/107/original/DSC_1968.jpg"}, {"src":"https://s3-us-west-2.amazonaws.com/manuals-fire-parts-production/product_images/images/000/013/108/original/DSC_1969.jpg"}]}}

Here is the full server response

{
  "message": "The server responded with invalid JSON, this is probably a server-side error",
  "response": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"referrer\" content=\"never\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Something went wrong</title>\n    <style type=\"text/css\">\n        *{box-sizing:border-box;margin:0;padding:0}html{font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;background:#F1F1F1;font-size:62.5%;color:#303030;min-height:100%}body{padding:0;margin:0;line-height:2.7rem}a{color:#303030;border-bottom:1px solid #303030;text-decoration:none;padding-bottom:1rem;transition:border-color 0.2s ease-in}a:hover{border-bottom-color:#A9A9A9}h1{font-size:1.8rem;font-weight:400;margin:0 0 1.4rem 0}p{font-size:1.5rem;margin:0}.page{padding:4rem 3.5rem;margin:0;display:flex;min-height:100vh;flex-direction:column}.text-container--main{flex:1;display:flex;align-items:start;margin-bottom:1.6rem}.action{border:1px solid #A9A9A9;padding:1.2rem 2.5rem;border-radius:6px;text-decoration:none;margin-top:1.6rem;display:inline-block;font-size:1.5rem;transition:border-color 0.2s ease-in}.action:hover{border-color:#000}@media all and (min-width:500px){.text-container--main{align-items:center}.page{padding:7.5rem 10.5rem}}\n    </style>\n</head>\n\n<body class=\"status-error status-code-500\">\n<div class=\"page\">\n    <div class=\"text-container text-container--main\">\n        <div>\n            <h1 data-i18n=\"content-title\">Something went wrong</h1>\n            <p data-i18n=\"try-refreshing\">There was a problem loading this website</p>\n            <p data-i18n=\"try-again\">Try refreshing the page.</p>\n            <a href=\".\" class=\"action\" data-i18n=\"refresh-page\">Refresh Page</a>\n        </div>\n    </div>\n</div>\n</body>\n\n</html>\n\n<script>\n  var t = {\n    \"cs\": {\n      \"title\": \"Něco se pokazilo\",\n      \"content-title\": \"Při načítání této webové stránky došlo k chybě\",\n      \"try-refreshing\": \"Zkuste stránku obnovit.\",\n      \"try-again\": \"Pokud se stránka ani přesto nenačte, zkuste to znovu za pár minut.\",\n      \"refresh-page\": \"Obnovit stránku\"\n    },\n    \"nb\": {\n      \"title\": \"Noe gikk galt\",\n      \"content-title\": \"Det oppsto et problem ved lasting av denne nettsiden\",\n      \"try-refreshing\": \"Prøv å oppdatere siden.\",\n      \"try-again\": \"Hvis nettstedet fortsatt ikke lastes inn, kan du prøve igjen om noen minutter.\",\n      \"refresh-page\": \"Oppdater siden\"\n    },\n    \"th\": {\n      \"title\": \"เกิดข้อผิดพลาดขึ้น\",\n      \"content-title\": \"เกิดปัญหาในการโหลดเว็บไซต์นี้\",\n      \"try-refreshing\": \"โปรดรีเฟรชหน้านี้อีกครั้ง\",\n      \"try-again\": \"หากเว็บไซต์ยังไม่โหลด โปรดลองอีกครั้งในอีกสักครู่\",\n      \"refresh-page\": \"รีเฟรชหน้า\"\n    },\n    \"pt-BR\": {\n      \"title\": \"Houve um erro.\",\n      \"content-title\": \"Houve um problema ao carregar este site\",\n      \"try-refreshing\": \"Tente atualizar a página.\",\n      \"try-again\": \"Se o site ainda não carregar, tente novamente dentro de alguns minutos.\",\n      \"refresh-page\": \"Atualizar a página\"\n    },\n    \"es\": {\n      \"title\": \"Algo salió mal.\",\n      \"content-title\": \"Se ha producido un error al descargar el sitio\",\n      \"try-refreshing\": \"Intenta actualizar la página.\",\n      \"try-again\": \"Si el sitio no se descarga, por favor, inténtalo en unos minutos.\",\n      \"refresh-page\": \"Actualizar la página\"\n    },\n    \"ko\": {\n      \"title\": \"문제가 발생했습니다.\",\n      \"content-title\": \"이 페이지를 로드하는 중 문제가 발생했습니다.\",\n      \"try-refreshing\": \"페이지를 새로 고침해 보십시오.\",\n      \"try-again\": \"그래도 사이트가 로드되지 않으면 몇 분 후에 다시 시도하십시오.\",\n      \"refresh-page\": \"페이지 새로 고침\"\n    },\n    \"da\": {\n      \"title\": \"Der opstod en fejl\",\n      \"content-title\": \"Der opstod en fejl under indlæsning af dette website\",\n      \"try-refreshing\": \"Prøv at opdatere siden.\",\n      \"try-again\": \"Hvis websitet ikke indlæses, kan du prøve igen om nogle få minutter.\",\n      \"refresh-page\": \"Opdatér siden\"\n    },\n    \"fi\": {\n      \"title\": \"Jotain meni pieleen\",\n      \"content-title\": \"Tämän verkkosivuston lataamisessa oli ongelma\",\n      \"try-refreshing\": \"Yritä päivittää sivu.\",\n      \"try-again\": \"Jos sivusto ei vieläkään lataudu, yritä uudelleen muutaman minuutin kuluttua.\",\n      \"refresh-page\": \"Päivitä sivu\"\n    },\n    \"pt-PT\": {\n      \"title\": \"Ocorreu um erro\",\n      \"content-title\": \"Ocorreu um erro ao carregar este site\",\n      \"try-refreshing\": \"Experimente atualizar esta página.\",\n      \"try-again\": \"Se o site continua a não carregar, tente novamente dentro de alguns minutos.\",\n      \"refresh-page\": \"Atualizar página\"\n    },\n    \"de\": {\n      \"title\": \"Irgendetwas ist schiefgelaufen.\",\n      \"content-title\": \"Beim Laden dieser Website ist ein Fehler aufgetreten.\",\n      \"try-refreshing\": \"Versuche, die Seite zu aktualisieren.\",\n      \"try-again\": \"Wenn die Seite immer noch nicht geladen wird, versuche es bitte in ein paar Minuten erneut.\",\n      \"refresh-page\": \"Seite neu laden\"\n    },\n    \"it\": {\n      \"title\": \"Si è verificato un errore\",\n      \"content-title\": \"Si è verificato un problema nel caricamento di questo sito web\",\n      \"try-refreshing\": \"Prova ad aggiornare la pagina.\",\n      \"try-again\": \"Se il sito ancora non si carica, per favore riprova tra qualche minuto.\",\n      \"refresh-page\": \"Aggiorna pagina\"\n    },\n    \"pl\": {\n      \"title\": \"Coś poszło nie tak\",\n      \"content-title\": \"Podczas ładowania tej strony internetowej wystąpił problem\",\n      \"try-refreshing\": \"Spróbuj odświeżyć stronę.\",\n      \"try-again\": \"Jeśli strona nadal się nie ładuje, spróbuj ponownie za kilka minut.\",\n      \"refresh-page\": \"Odśwież stronę\"\n    },\n    \"sv\": {\n      \"title\": \"Ett fel uppstod\",\n      \"content-title\": \"Det gick inte att ladda den här webbplatsen\",\n      \"try-refreshing\": \"Försök att uppdatera sidan.\",\n      \"try-again\": \"Försök igen om några minuter om webbplatsen fortfarande inte har laddats.\",\n      \"refresh-page\": \"Uppdatera sida\"\n    },\n    \"en\": {\n      \"title\": \"Something went wrong\",\n      \"content-title\": \"There was a problem loading this website\",\n      \"try-refreshing\": \"Try refreshing the page.\",\n      \"try-again\": \"If the site still doesn't load, please try again in a few minutes.\",\n      \"refresh-page\": \"Refresh Page\"\n    },\n    \"hi\": {\n      \"title\": \"कुछ गलत हुआ\",\n      \"content-title\": \"इस वेबसाइट को लोड करने में समस्या हुई\",\n      \"try-refreshing\": \"पृष्ठ रीफ़्रेश करके देखें.\",\n      \"try-again\": \"यदि साइट अभी तक लोड नहीं हुई है, तो कृपया कुछ मिनटों में फिर से कोशिश करें.\",\n      \"refresh-page\": \"पेज को रीफ़्रेश करें\"\n    },\n    \"ja\": {\n      \"title\": \"問題が発生しているようです\",\n      \"content-title\": \"このウェブサイトを読み込む際に問題が発生しました\",\n      \"try-refreshing\": \"ページを更新してみてください。\",\n      \"try-again\": \"サイトが読み込まれない場合は、数分後にもう一度お試しください。\",\n      \"refresh-page\": \"ページを更新する\"\n    },\n    \"fr\": {\n      \"title\": \"Une erreur s'est produite\",\n      \"content-title\": \"Un problème est survenu lors du chargement de ce site\",\n      \"try-refreshing\": \"Essayez d'actualiser la page.\",\n      \"try-again\": \"Si le site ne charge toujours pas, veuillez réessayer dans quelques minutes.\",\n      \"refresh-page\": \"Rafraîchir la page\"\n    },\n    \"zh-TW\": {\n      \"title\": \"出了點問題\",\n      \"content-title\": \"系統載入此網站時發生問題\",\n      \"try-refreshing\": \"請嘗試重新整理此頁面。\",\n      \"try-again\": \"如果網站仍未載入，請幾分鐘後再試一次。\",\n      \"refresh-page\": \"重新整理頁面\"\n    },\n    \"ms\": {\n      \"title\": \"Sesuatu tidak kena\",\n      \"content-title\": \"Terdapat masalah memuatkan laman web ini\",\n      \"try-refreshing\": \"Cuba segarkan semula halaman.\",\n      \"try-again\": \"Jika laman web ini masih tidak memuatkan, sila cuba lagi dalam beberapa minit.\",\n      \"refresh-page\": \"Segarkan semula Halaman\"\n    },\n    \"tr\": {\n      \"title\": \"Bir sorun oluştu\",\n      \"content-title\": \"Bu web sitesi yüklenirken sorun oluştu\",\n      \"try-refreshing\": \"Sayfayı yenilemeyi deneyin.\",\n      \"try-again\": \"Sayfa hâlâ yüklenmiyorsa lütfen birkaç dakika sonra tekrar deneyin.\",\n      \"refresh-page\": \"Sayfayı Yenile\"\n    },\n    \"vi\": {\n      \"title\": \"Đã xảy ra lỗi\",\n      \"content-title\": \"Đã xảy ra sự cố khi tải trang web này\",\n      \"try-refreshing\": \"Thử làm mới trang.\",\n      \"try-again\": \"Nếu trang web vẫn không tải được, vui lòng thử lại sau ít phút.\",\n      \"refresh-page\": \"Tải lại trang\"\n    },\n    \"zh-CN\": {\n      \"title\": \"出现错误\",\n      \"content-title\": \"加载此网站时出现问题\",\n      \"try-refreshing\": \"请尝试刷新页面。\",\n      \"try-again\": \"如果网站仍未加载，请在几分钟后重试。\",\n      \"refresh-page\": \"刷新页面\"\n    },\n    \"nl\": {\n      \"title\": \"Er ging iets mis\",\n      \"content-title\": \"Er is een probleem opgetreden bij het laden van deze website\",\n      \"try-refreshing\": \"Laad de pagina opnieuw.\",\n      \"try-again\": \"Als de site nog steeds niet laadt, probeer het over een paar minuten opnieuw.\",\n      \"refresh-page\": \"Pagina opnieuw laden\"\n    }\n  };\n  var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox\n    navigator.language ||   // All browsers\n    navigator.userLanguage || // IE <= 10\n    \"en\";\n  language = language.split(\"-\")[0]; // Strip country code\n  translations = t[language] || t[\"en\"];\n  // Replace content on screen\n  for (var id in translations) {\n    target = document.querySelector(\"[data-i18n=\" + id + \"]\");\n    if (target != undefined) {\n      target.innerHTML = translations[id];\n    }\n  }\n  // Replace title tage\n  document.title = translations[\"title\"];\n  // Replace language tag\n  if (t[language]) { document.getElementsByTagName('html')[0].setAttribute('lang', language); };\n</script>\n"
}

[Luke_K]

Hey @strocode 

Thanks for raising this! I tried your exact productAppendImages query and I was returned a timeout in my case. If this request takes longer than 25 seconds to be saved to the database Shopify will cancel it. 

You may be aware that productAppendImages is actually available to the Bulk Operation Run Mutation(docs). Those docs will guide you through it should you desire to run productAppendImages as part of a Bulk Operation Run Mutation.

Aside from that, you might like to try with fewer srcs Urls in the query variables - I note that with fewer src Urls (around half), I'm able to successfully upload with no timeout - the query variables were fine actually, so it's curious you received the first error. Hope that helps!

[strocode]

That does make sense, and I have built a bulk query version of my request. The thing is, when I start the request and I run the currentBulkOperation, I don't get any data back. I can't figure out if my operation has run or not!

Another further wrinkle in this is that all of these images form a 360 image on the server. If they aren't uploaded at the same time, it breaks the 360.

[Luke_K]

Hey @strocode 

It's worth noting that with the latest API release 2021-10, you can subscribe to the bulk operations finish webhook (docs) - this hook would at least tell you if the Bulk Operation has completed, been cancelled or whether it has failed.

It sounds strange how you're not getting data back - though another way to tell if the bulk operation has run or not, is to poll it via the currentBulkOperation field - hope that helps you!

[strocode]

I'll post some of the responses I get to illustrate. Here is the response to my bulk query operation

<GraphQL::Client::Response:0x00007feae5332db8 @Original_hash={"data"=>{"bulkOperationRunMutation"=>{"bulkOperation"=>{"id"=>"gid://shopify/BulkOperation/580362698925", "status"=>"CREATED", "url"=>nil}, "userErrors"=>[]}}, "extensions"=>{"cost"=>{"requestedQueryCost"=>10, "actualQueryCost"=>10, "throttleStatus"=>{"maximumAvailable"=>2000.0, "currentlyAvailable"=>1990, "restoreRate"=>100.0}}}}, @Data=#< bulkOperationRunMutation=...>, @errors=#<GraphQL::Client::Errors @messages={} @details={}>, @extensions={"cost"=>{"requestedQueryCost"=>10, "actualQueryCost"=>10, "throttleStatus"=>{"maximumAvailable"=>2000.0, "currentlyAvailable"=>1990, "restoreRate"=>100.0}}}>

When I poll the currentBulkOperation immediately after, I get this response: 

<GraphQL::Client::Response:0x00007feae9c3daa8 @Original_hash={"data"=>{"currentBulkOperation"=>nil}, "extensions"=>{"cost"=>{"requestedQueryCost"=>1, "actualQueryCost"=>1, "throttleStatus"=>{"maximumAvailable"=>2000.0, "currentlyAvailable"=>1999, "restoreRate"=>100.0}}}}, @Data=#< currentBulkOperation=nil>, @errors=#<GraphQL::Client::Errors @messages={} @details={}>, @extensions={"cost"=>{"requestedQueryCost"=>1, "actualQueryCost"=>1, "throttleStatus"=>{"maximumAvailable"=>2000.0, "currentlyAvailable"=>1999, "restoreRate"=>100.0}}}>

Here is the query I am using on currentBulkOperation

  def bulk_query_running?(shopify_store_id)
    shopify_store_connect(shopify_store_id)
    client = ShopifyAPI::GraphQL.client
    bulk_poll_query = client.parse <<-'GRAPHQL'
    query {
      currentBulkOperation {
        id
        status
        errorCode
        createdAt
        completedAt
        objectCount
        fileSize
        url
        partialDataUrl
      }
    }
    GRAPHQL

    result = client.query(bulk_poll_query)
    return result
  end

I will try to use the webhook interface in the meantime and post my results here.