It's super confusing but your Shopify GraphQL APIs are split into:
- Storefront - Limited access to information and mutations. Certain fields are NOT available. Credentials are publicly exposed.
- Admin - FULL access to all queries, fields, and mutations.
As you can see, giving access to the client via admin would be disastrous in terms of security. Shopify's CORs policy will not allow access from the client. Admin API can only be accessed server-to-server. Your client or React App has only one option, Storefront API.
Basic store information can be accessed via Storefront API. The issue we had was getting Shopify's familiar Variant ID from the hashed ID that returns from a query. Shopify literally calls this field, `legacyResourceId` in the GraphQL Admin docs
Admin GraphQL API response:
{
"data": {
"product": {
"id": "gid://shopify/Product/1324932956216",
"title": "GQL Lego Connector",
"storefrontId": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzEzMjQ5MzI5NTYyMTY="
"legacyResourceId": "1324932956216"
}
},
...
}Shopify's Storefront API only has access to `storefrontId` which is simply called, `id`. This is a base64 hash of Shopify's new `gid`. You will need to take the has and decode it to get the proper `gid`
const productId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzEzMjQ5MzI5NTYyMTY'
let decodeProductId = atob(productId)
console.log(decodeProductId)
// output: `gid://shopify/Product/1324932956216`
It would be lovely if Shopify actually had Storefront API documentation. The Admin API is well documented but we're left guessing and trying when it comes to storefront tools.
