Shopify Storefront API: Getting referenced variant with GraphQL

Question

I'm using the Shopify Storefront API and Accentuate to try to get my hands on a specific variant, but it won't work for me.

THE SHORT VERSION: When I select a variant on the website, I get the url: (... url ...)?variant=31696763027492. How do I get my hands on these numbers after the = for the variant in GraphQL? It does not match the ID.

THE LONG VERSION...

In a product variant, I reference to a variant of another product (with Accentuate). What I need to get out is the variant that I am referencing to.

When I pull out the variant that is being referenced to in the product (as metafield, with GraphQL), I get this:

{
"key": "products_in_package",
"value": "pakke-produkt-gavepose:31696763027492"
}

My problem is the numbers after : in the value. I've found that these are the number that come after the URL of the product when selecting the variant on the "actual" Shopify website ((... url ...)?variant=31696763027492), but I can't see how I can use them, since I can't find these numbers on the actual variant through GraphQL.

It does not match the 'id' or anything else I could find on the variant. Neither can I include the numbers if I try to get productByHandle.

So, does anyone have any ideas on how I can I use it to get the actual product variant through GraphQL? Or ideas on what else I can do to connect a specific product variant to another product variant?

Answer 1

The storefront API and admin API return different format of Id

• storefront API: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQ3NjA3ODY1MDE3MDM="

• Admin API: "gid://shopify/Product/4760786501703"

But there is a convert way between each other, use function atob

atob("Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzQ3NjA3ODY1MDE3MDM=") will get the Admin API Id

For NodeJS package: https://www.npmjs.com/package/atob