Proper way of fetching product and variant ids

[rajanlagah]

In my app, we are passing the Product Id, variant Id and product description page to our backend and then processing the product.
I see a query to fetch product details

In this, i am processing gid://shopify/Product/7867633336552 and gid://shopify/ProductVariant/43456374112488 and processing these strings to get 7867633336552 and 43456374112488.

Question is there any better way to do the same? Splitting graphql ids seems not to be correct.

[rajanlagah]

@davidhousedev any help?

[davidhousedev]

Sounds like you're trying to remove the gid://Shopify/Product/ namespace from the graphql id, so you can save the numeric id. If I'm understanding your question, then I'd suggest using string manipulation or a regular expression to isolate the numeric id.

I'm curious, what exactly is the problem with the gid namespace?

[rajanlagah]

@davidhousedev we have our app on Shopify and the whole backed work with just a numeric id. Normally we get productId and variantId as separate variables in our non-headless implementations.
Now in hydrogen headless implementation, I am wondering if this is the only way to fetch product and variant id.
Given both values are important so processing string to fetch them is a little odd.

[frehner]

We actually do something similar to just parsing the string in Hydrogen-UI, so I think you should be ok doing what you're doing here.

https://github.com/Shopify/hydrogen-ui/blob/d2e5d4eb9ff145e15ddcc89c734ae2d67066da41/packages/react/src/ShopPayButton.tsx#L101-L107

[lagahrajan]

@frehner got it 👍. Thankyou for sharing the link.

[davidhousedev]

We actually do something similar to just parsing the string in Hydrogen-UI

JavaScript™️ 🤣