Shopify Question posted in
The Shopify help center can be found here.

Shopify Storefront API: Getting referenced variant with GraphQL

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?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The problem is (or was) that those numbers are not what you get when you get the id from the product through GraphQL. You get a much longer id, like "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMTY5NDA3MjQxNDI0NA==".

    However, I figures out that using the btoa() JavaScript function on the id you mention (gid://shopify/ProductVariant/31646396055604), I got the long id that I get from the product itself. So problem solved!


  2. 0

    The variant ID and GraphQL variant ID is closely related.

    • Variant id – 31646396055604
    • GraphQL Variant id – gid://shopify/ProductVariant/31646396055604

    The GraphQL ID is the same as the Variant id but you must add the string gid://shopify/ProductVariant/ before it.

    So your GraphQL request will become like so:

    {
  productVariant(id:"gid://shopify/ProductVariant/31646396055604"){
    title
    product{
      id
    }
  }
}
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search