Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
I have a store that calls:
https://mystore.myshopify.com/api/2022-10/graphql.json with the checkoutCreate mutation.
Here is the raw curl request:
curl 'https://mystore.myshopify.com/api/2022-10/graphql.json' \ -H 'authority: mystore.myshopify.com' \ -H 'accept: */*' \ -H 'accept-language: en-US,en;q=0.9' \ -H 'content-type: application/json' \ -H 'origin: https://mystore.com' \ -H 'referer: https://mystore.com/' \ -H 'sec-fetch-dest: empty' \ -H 'sec-fetch-mode: cors' \ -H 'sec-fetch-site: cross-site' \ -H 'sec-gpc: 1' \ -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36' \ -H 'x-shopify-storefront-access-token: mytoken' \ --data-raw $'{"operationName":null,"variables":{"input":{}},"query":"mutation ($input: CheckoutCreateInput\u0021) {\\n checkoutCreate(input: $input) {\\n checkout {\\n id\\n customAttributes {\\n key\\n value\\n __typename\\n }\\n __typename\\n }\\n __typename\\n }\\n}\\n"}' \ --compressed
We can see in our error logger that this call will occasionally fail with the following error object:
{"cause":{"graphQLErrors":[],"networkError":{},"message":"Network error: Failed to fetch"}}
sometimes we also get
{"cause":{"graphQLErrors":[],"networkError":{},"message":"Network error: Load failed"}}
The message does not point me anywhere and I cannot reproduce the error locally. This is happening to a small percentage of our users across chrome/safari/mac/windows, so I cannot find any pattern in browsers or environments if it is an incompatibility issue. The request usually works so we are indeed passing all the correct variables.
I am confused as to where this error is coming from. Could it be a race condition where I am not waiting for something to happen before making this request? Any help would be greatly appreciated.