Shopify Storefront API. adding item to cart

Im using the Shopify storefront API to query for a list of products and add a selected item to the cart.

I am able to use API to list all the products, and returns the variantID for the product found

Here is the GraphQL query to return a product

{
  shop {
    name
    products(first: 1, query:"title=configurable-handmade-concrete-ball") {
      edges {
        cursor
        node {
          id
          title
          handle
          variants(first:1) {
            edges {
              node {
                id
                title
              }
            }
          }
        }
      }
    }
  }
}

and the result

{
  "data": {
    "shop": {
      "name": "VonageTest",
      "products": {
        "edges": [
          {
            "cursor": "eyJvZmZzZXQiOjF9",
            "node": {
              "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzEwNTU2MjYxNTE4",
              "title": "Configurable Handmade Concrete Ball",
              "handle": "configurable-handmade-concrete-ball",
              "variants": {
                "edges": [
                  {
                    "node": {
                      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC80MDIwOTc1NjQzMA==",
                      "title": "Default Title"
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  }
}

In order to add items to the cart, you can make a POST request that contains the following

https://{store_name}.myshopify.com/cart/{variant_id}

performing this call using the variant_id from the graphQL response returns a 404. But if you get the variant_id from the page, you can inspect the xml page and use the variant_id there This shows how that is done https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart

so why does the variant_id from the storefront API different from the variant_id on the page?