Js-buy-sdk: Cannot update or delete line items

[levimichael]

Bug:
Cannot update or delete line items.

{
variantId: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8xMzEzMDM4NzQyMzI4Nw==", quantity: 1
}

is added successfully.

However, trying to update or delete the line item, the console prints:
Uncaught (in promise) Error: [{"field":null,"message":"Line item with id 2815e3d64efc21a40e226cab0cd308f5 not found","code":"LINE_ITEM_NOT_FOUND"}]

Request headers:

Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Encoding: gzip
Content-Language: en
Content-Security-Policy: frame-ancestors 'none'; report-uri /csp-report?source%5Baction%5D=query&source%5Bapp%5D=Shopify&source%5Bcontroller%5D=api%2Fgraphql&source%5Bsection%5D=api&source%5Buuid%5D=80e9ed30-c2fb-4f47-a54d-bdd542f42f6c
Content-Type: application/json; charset=utf-8
Date: Fri, 15 Mar 2019 17:04:42 GMT
Server: nginx
Strict-Transport-Security: max-age=7889238
Transfer-Encoding: chunked
Vary: Accept-Encoding
X-Content-Type-Options: nosniff, nosniff
X-Dc: chi2,gcp-us-east1
X-Download-Options: noopen
X-Frame-Options: DENY
X-Permitted-Cross-Domain-Policies: none
X-Request-Id: 80e9ed30-c2fb-4f47-a54d-bdd542f42f6c
X-ShardId: 54
X-ShopId: 1091207223
X-Shopify-API-Deprecated-Reason: https://help.shopify.com/api/getting-started/api-deprecations
X-Shopify-Stage: production
X-Sorting-Hat-PodId: 54
X-Sorting-Hat-ShopId: 1091207223

Response:
{"data":{"checkoutLineItemsUpdate":{"userErrors":[{"field":null,"message":"Line item with id 84aad89cedfa0ba08b1bf6538c1a8828 not found"}],"checkoutUserErrors":[{"field":null,"message":"Line item with id 84aad89cedfa0ba08b1bf6538c1a8828 not found","code":"LINE_ITEM_NOT_FOUND"}],"checkout":null}}}

Environment:
MacOS Mojave 10.14.3
Chrome 73.0.3683.75
Safari 12.0.3

iOS 12.2
Mobile Safari

SDK Version 2.1.1

My thoughts:
The part I really am confused by is this has been working fine since the merchant launched two weeks ago. It just started happening out of the blue a couple of days ago with no changes to our implementation whatsoever.

[jmignac]

Hey, @levimichael.

This is a known issue we are working on at the moment. We will post an update here as soon as we have a fix released.

[kireerik]

Hi @jmignac,

May I ask you that is this an issue in the Shopify backend or in the Shopify JavaScript Buy SDK specifically?

In case it is an issue in the Shopify JavaScript Buy SDK is it possible to update and delete line items (properly) using the Shopify (GraphQL) Storefront API (directly)?

Thank you for your feedback in advance!

[jmignac]

Hey, @kireerik,

May I ask you that is this an issue in the Shopify backend or in the Shopify JavaScript Buy SDK specifically?

This is an issue with the JS buy SDK specifically, that is consuming a deprecated mutation on the Storefront API.

In case it is an issue in the Shopify JavaScript Buy SDK is it possible to update and delete line items (properly) using the Shopify (GraphQL) Storefront API (directly)?

Yes! Meanwhile, a possible workaround is calling the Storefront API directly for line items operations and use our checkoutLineItemsReplace mutation.

Cheers!

[kireerik]

Deletion works using the removeLineItems method by the way.
I guess removing line items should be possible using the updateLineItems method as well.

[kireerik]

Hi @jmignac, are you sure that the checkoutLineItemsReplace mutation is working properly?

I am getting an 500 (Internal Server Error) without any response data.

Here is how my request looks like:

const response = await fetch('https://' + my_domain_com + '/api/graphql', {
    method: 'POST'
    , headers: {
        'X-Shopify-Storefront-Access-Token': shopifyStorefrontAccessToken
        , 'Content-Type': 'application/json'
    }
    , body: JSON.stringify({
        query: `
            mutation checkoutLineItemsReplace($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
              checkoutLineItemsReplace(checkoutId: $checkoutId, lineItems: $lineItems) {
                checkout {
                  id
                }
                userErrors {
                  code
                  field
                  message
                }
              }
            }
        `
        , variables: {
            checkoutId: checkoutId
            , lineItems: [
                {
                    variantId: variantId
                    , quantity: 1
                }
            ]
        }
    })
})
, result = await response.json()
console.log(result)

If I provide no line items like this:

lineItems: [
    //{
    //    variantId: variantId
    //    , quantity: 1
    //}
]

Then it "works".

If I am not providing lineItems at all like this:

, variables: {
    checkoutId: checkoutId
    //, lineItems: [
    //    {
    //        variantId: variantId
    //        , quantity: 1
    //    }
    //]
}

or like this:

, variables: {
    checkoutId: checkoutId
    , lineItems: undefined//[
    //    {
    //        variantId: variantId
    //        , quantity: 1
    //    }
    //]
}

Then I am getting the appropriate and expected error message.

[rebeccajfriedman]

We've also added a checkout.replaceLineItems method that you can use: https://github.com/Shopify/js-buy-sdk/blob/master/src/checkout-resource.js#L205-L224

I'm not sure what's going wrong, as I just executed your query locally on my test shop and I got a valid response.

const checkoutMutation = `mutation checkoutLineItemsReplace($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
      checkoutLineItemsReplace(checkoutId: $checkoutId, lineItems: $lineItems) {
        checkout {
          id
        }
        userErrors {
          code
          field
          message
        }
      }
    }`

const checkoutId = "Z2lkOi8vc2hvcGlmeS9DaGVja291dC83YTBkYTAzYWZjMWM4MTBhYzI1YjgxNjQyMzdkMzM3Nz9rZXk9YTlkZTM1ZmQzODYwZTFkZDdjZGQwYzA3NTBlMWFhNjY=";
const lineItems = [{"variantId": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8xMzg3MDQ4MzQ3MjQwNg==", "quantity": 5}];

fetch('https://MYSHOPIFY_DOMAIN/api/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': storefrontAccessToken
      },
      body: JSON.stringify({ query: checkoutMutation, variables: {checkoutId: checkoutId, lineItems: lineItems} })
    })
    .then(res => res.json())
    .then(res => {
      console.log(res);
    });

Some things that could be going wrong:

• Your variantId or checkoutId might be invalid (they should look similar to mine above)
• You are attempting to mutate a checkout that was not created using the same access token that you are using in this mutation

When you get an error response back, it should have a "request ID" in the message. If you provide the request ID, we can look at your case specifically.

[kireerik]

After posting my previous comment I have noticed that I was using the wrong id. The lineItemId instead of the variantId. However the 500 (Internal Server Error) is not too useful to get in this case. :)

[rebeccajfriedman]

Glad to hear that this is resolved!

[fandy]

@jmignac Are there any updates on fixing checkoutLineItemsUpdate? When I pass in the correct variantId and checkoutId I'm getting this checkoutUserErrors: Line item with id not found.

[fandy]

Can confirm that checkoutLineItemsReplace works in the meantime. Would be great to have the mutation removed or this bug documented so that people don't get stuck. 🙏

P.S. This wasn't clear in the docs, but what's the difference between the update and replace mutation? And why does update take an idin addition to variantId?

[jmignac]

Hey, @fandy

The difference between checkoutlineItemsUpdate and checkoutLineItemsReplace is that the former gets a line item that already exists and modifies it according to the params passed in the mutation, whereas the latter empties the checkout and adds the line items passed in the mutation as new items.

checkoutLineItemsUpdate doesn't require a variantId, yet you can pass it in if you want to change a line item to refer to a different variant. However the id required in the mutation refers to the line item id. Here's the format (just confirmed it still works):

{
  "checkoutId":  checkoutId ,
  "lineItems": [
    {
      "id": existingLineItemId,
      "quantity": qty
    }
  ]
}

Please, let me know if you have further questions.

[chrisworman-pela]

@rebeccajfriedman @jmignac Is this issue actually resolved? If so, can you point me to the PR? If not, I'm curious why this issue is closed. I seem to be experiencing this issue using the latest Javascript client (shopify-buy 2.10.0).

If this is still an issue, is there a work around for shopify-buy 2.10.0?

Steps to Reproduce

It's difficult to provide a complete set of steps to reproduce because I have to add multiple items to get my cart in a state that yields the error, but if it helps, these HTTP headers were included in the response that yielded an error:

cf-request-id: 038f3722bd0000bb528013c200000001
x-request-id: 4e65734c-b650-426a-9a43-56ee52ae5b82

After adding multiple items, the checkout has 5 line items. Here is a subset of the JSON for the checkout:

But when I call client.checkout.removeLineItems(checkout.id, [lineItem.id]) for the line item at index 2, I get the following error:

Error: [{"field":null,"message":"Line item with id 339915036754511 not found","code":"LINE_ITEM_NOT_FOUND"}]

Also, if I remove the line item at index 3, then the line items at index 2 and 3 are both removed. Very strange.