How to identify unique items in a quick cart with duplicate variant_ids?

[ft3]

I am implementing a quick cart using Alpine.js and the Shopify Ajax Api. The docs note that `cart` can have multiple items with the same `variant_id` and suggest  using `item.key` when making updates via `/cart/update.js`. The problem is that `item.key` is not unique either. For example, assuming a cart level discount of buy 4 get one is applied to a product, you can end up with one to three items for the same product:

{
  items: [
    {
      key: 'x000000000000:15692f47e7eff04bbd16a738edb64f42',
      quantity: 8,
      final_price: 3895,
      id: x0000000000000,
      variant_id: x0000000000000
     },
    {

      key: 'x000000000000:15692f47e7eff04bbd16a738edb64f42',
      quantity: 2,
      final_price: 0,

      id: x0000000000000,
      variant_id: x0000000000000

    },

    {

      key: 'x000000000000:15692f47e7eff04bbd16a738edb64f42',
      quantity: 1,
      final_price: 3895,

      id: x0000000000000,
      variant_id: x0000000000000
     }
  ]
}

The issue with this that Alpine.js requires a unique `key` for when rendering a list that is dynamically changed (adding products and changing quantities), but id, variant_id and key are duplicated for the same product. I have tried creating a composite key out of various fields to no effect. Is there not a unique way to identify an item as unique (even if the variants are duplicative)?

Second, is using the the ordinal positioning of the cart items the only way to reliably mutate the cart (change quantities or remove)?

[PaulNewton]

They key should still behave as unique they are the same line-item , such as if you change the quantity; it's just discount behaviors are confusing and added post-hoc to the ajax api years after it was made.

The keys should be unique when/if the variants have line-item-properties attached to them.

https://shopify.dev/docs/api/liquid/objects/line_item#line_item-properties 

https://community.shopify.com/c/shopify-design/product-pages-get-customization-information-for-produ... 

[ft3]

Yeah - I kind of understand the rationale in that they are, technically speaking, the same line item. However, it makes is difficult to track changes when mutating the list. In this case, Alpine.js' `x-for` directive requires requires a non-index `key` to ensure that changes to the list are tracked.

[rpbiwer]

I just ran into this problem (not with Alpine.js specifically – I'm using Liquid – but with `key` not being unique). I'd consider this buggy behavior on the part of Shopify because the list of line items returned by Shopify APIs (including Liquid) returns them as separate line_items, and thus having different keys causes subtle bugs that require jumping through a lot of hoops to mitigate.

[rpbiwer]

I'm also observing some pretty weird behavior when using the change.js API on one of these line items.. definitely something that should be fixed.

Edit: and by weird I mean incorrect/broken