Cart Lines returns Invalid ID (GraphQL)

[joshcorbett]

I'm using GraphQL to move our Shopify Store to custom jam-stack. I've created functionality to create a cart and retrieve the cart via it's ID, and now I'm trying to update the cart for every new product added/modified.

The documentation behind the cartLinesUpdate or cartLinesAdd require use of the CartLine Object for passing data like product ID, quantity, etc. and the demo is understandable enough...

I've tried passing every ID imaginable to this mutation and it always returns invalid ID. Turns out the Variant IDs my app is getting are like twice as long as what the existing liquid theme are retreiving.

I seem to not have a clear idea of what data to pass to the CartLines Object for my mutation to be happy.

Example Product Variant:

- Storefront API: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zOTM1Nzg0Njk3ODYzMg=="

- Liquid Theme: "39357846978632"

My Mutation:

mutation cartLinesUpdate(
  $cartId: ID!,
  $lines: [CartLineUpdateInput!]!
) {
  cartLinesUpdate(cartId: $cartId, lines: $lines) {
    cart {
      id
    }
    userErrors {
      code
      field
      message
    }
  }
}

 Variables:

{
  "cartId": "Z2lkOi8vc2hvcGlmeS9DYXJ0LzBhMDIxNDQ2ODQ0ZDU1MGRhZmZmMWJjZTIzNTBhNDY4",
  "lines": [
    {
      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zOTM1Nzg0Njk3ODYzMg==",
      "quantity": 1
    }
  ]
}

Response:

{
  "data": {
    "cartLinesUpdate": null
  },
  "errors": [
    {
      "message": "invalid id",
      "locations": [
        {
          "line": 5,
          "column": 3
        }
      ],
      "path": [
        "cartLinesUpdate"
      ]
    }
  ]
}

[khamd002]

Hi Josh,

The id you are probably looking for when using GraphQL is the resource legacyResourceId. That field will return the resource id field when using the REST API.

However, from this thread, it doesn't seem to be available on LineItems. I have not verified this though. Not sure if you need it for your use case but something to look out for.

Hope this helps!

[kndwin]

Bumping this since I'm also running to the same issue. It's strange because `cartLinesAdd` works with the same merchandiseId's so I'm not sure what's going on with `cartLinesRemove`

Any help would be much appreciated.

variables {
  cartId: "Z2lkOi8vc2hvcGlmeS9DYXJ0L2U1OWZmZGM3NDNkMzM1NWIxZDA0ZDU3ZDJjY2VhNzk1"
  lineIds: ["Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC80MTg5Njg3MjA4MzY5Ng=="]
}

export const REMOVE_ITEM_FROM_CART = gql`
	mutation RemoveLineFromCart($cartId: ID! , $lineIds: [ID!]! ) {
		cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
			cart {
				id
			}
		}
	}
`

  const [removeItemFromCartMutation] = useMutation(REMOVE_ITEM_FROM_CART, {
    onError: (error) => console.log(JSON.stringify(error, null, 2)),
    refetchQueries: [
      { query: GET_CART_ID, fetchPolicy: "network-only" },
      {
        query: GET_CART_FROM_ID,
        variables: { cartId },
        fetchPolicy: "network-only",
      },
    ],
  });

  const removeItemFromCart = async ({ merchandiseId }: any) => {
    const removedItem = await removeItemFromCartMutation({
      variables: { cartId, lineIds: [merchandiseId] },
    });
    console.log({ removedItem });
  };

[kndwin · Accepted solution]

 I found the answer, the reason for the Invalid ID was because I was passing the wrong merchandise Id. Hope it helps!

query GetCartFromId($cartId: ID!) {
	cart(id: $cartId) {
		id
		createdAt
		updatedAt
		lines(first: ${MAX_CART_ITEM}) {
			edges {
				node {
					id <-- Actual ID to use
					quantity
					merchandise {
						... on ProductVariant {
							id <-- Previously used ID
							title
							image {
								originalSrc
							}
							priceV2 {
								amount
								currencyCode
							}
						}
					}
					estimatedCost {
						subtotalAmount {
							amount
							currencyCode
						}
					}
				}
			}
		}
		estimatedCost {
			subtotalAmount {
				amount
				currencyCode
			}
		}
	}
}

[adinjesuha]

Hi @kndwin , how do you get the cart ID from the store front API...?

[thodorispa]

query {
        cart(id: "${id}") {
          id
          createdAt
          updatedAt
          checkoutUrl
          lines(first: 10) {
            edges {
              node {
                id
                quantity
                merchandise {
                  ... on ProductVariant {
                    id
                    priceV2 {
                      amount
                      currencyCode
                    }
                    image {
                      url
                      altText
                    }
                    product {
                      ... on Product {
                        title
                      }
                    }
                  }
                }
                
              }
            }
          }
          cost {
            totalAmount {
              amount
              currencyCode
            }
            subtotalAmount {
              amount
              currencyCode
            }
            totalTaxAmount {
              amount
              currencyCode
            }
            totalDutyAmount {
              amount
              currencyCode
            }
          }
        }
      }

[joshcorbett]

First a cart must be created using the cartCreate mutation, further information available in the documentation.

Once you get a response from the mutation, store the id in localstorage, cookies, etc. to keep it  as a persistent piece of state.

I typically only run the cartCreate mutation when a product gets added, to prevent unnecessary abandoned carts.