error generating storefront id in shopify buy js sdk

Question

I am super confused with the documentation on Shopify. I wanted to use their Javascript Buy SDK. To follow their simple product fetch example, in the docs, it says that "Before you can retrieve a product or collection, you need to query for a Storefront ID. After you've obtained either a product ID or collection ID, you can fetch the product or collection using the SDK."

So using the Shopify Graphiql app and from the example to get a storefront ID, the request looks like this.

{
  shop {
    productByHandle(handle: "my-own-product-handle") {
      id
    }
  }
}

the expected return id is somewhat like "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzczNDE0OTkzOTk=" in some sort of encoded value. But however the ID I am getting is like a URL. Here is what I got in return.

{
  "data": {
    "shop": {
      "productByHandle": {
        "id": "gid://shopify/Product/1349634097238"
      }
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 2,
      "actualQueryCost": 2,
      "throttleStatus": {
        "maximumAvailable": 1000,
        "currentlyAvailable": 998,
        "restoreRate": 50
      }
    }
  }
}

When I use this URL to do a request as shown in JS SDK example

// Fetch a single product by ID
const productId = 'gid://shopify/Product/13496340972223';

client.product.fetch(productId).then((product) => {
  // Do something with the product
  console.log(product);
});

I get the error in the console that Variable id of type ID! was provided invalid value.

I am not able to figure out where I am missing the dots.

Please help!

Thanks.

Sandy Wyper Sandy Wyper · Accepted Answer · 2019-05-07T13:59:38

Think I have cracked it.... or at least found a work around. This should be clearer I feel, which makes me think I'm wrong.... anyway, here's what I found out.

When using the Shopify graphiQl app you can ask for the id. (just as you have shown above). Take the result and encode it into base64 here.. https://www.base64encode.org/

That will give you the result - 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzEzNDk2MzQwOTcyMjIz'.

Stick that in your productId variable and you should get a response.

error generating storefront id in shopify buy js sdk

1 Answers