nuxt.js - nuxt-shopify: cannot add productvariant to checkout (invalid global id)

Question

I am building a headless shopify website using shopify-nuxt. I can already fetch products and productvariants and create a checkout to get the checkoutID.

Now, I want to add items to the cart to complete the checkout. The ID's I am getting of my productvariant looks like this:

 {
        "id": 37347204038813,
        "product_id": 5909234516125,
        "inventory_item_id": 39367677640861,
        "admin_graphql_api_id": "gid://shopify/ProductVariant/37347204038813"
 },

Now, in my Vuex store, when I want to add a lineItem, I am using the method like this:

  async addCartItem(state, {selectedVariantId}) {
    const lineItemsToAdd = [
      {
        variantId: selectedVariantId, // either id, product_id or inventory_item_id
        quantity: 1
      }];
console.log(lineItemsToAdd) // [{variantId: 5909234516125, quantity: 1}]

    
    await this.$shopify.checkout.addLineItems(this.app.$checkout.getCheckoutId(), lineItemsToAdd)
      .then(checkout => {
        // The Method is not going here.
        state.commit('updateCheckout', checkout);
      }).catch((e) => {
        console.log(e);
      });
  },

When I try to add a lineItem to the checkout, using the sdk I am getting the following error:

Error: [{"message":"Variable $lineItems of type [CheckoutLineItemInput!]! was provided invalid value for 0.variantId (Invalid global id `5909234516125`)","locations":[{"line":1,"column":3245}],"extensions":{"value":[{"variantId":5909234516125,"quantity":1}],"problems":[{"path":[0,"variantId"],"explanation":"Invalid global id `5909234516125`","message":"Invalid global id `5909234516125`"}]}}]

I noticed, that the ID of my productvariant looks different from the ID of the nuxt-shopify documentation example. But I do not know, how to get the "correct" id, because fetching the product with the wrong ids does not work.

Answer 1

After a lot of research, I found out how to get the correct ID. You have to fetch the property admin_graph_api_id and enocde it with btoa like this:

btoa(this.selectedVariantId)