Js-buy-sdk: Unable to fetch any product or collection

[chase-moskal]

DESCRIBE THE BUG

any attempt to fetch any product or collection throws this error:

• message: Variable id of type ID! was provided invalid value
• explanation: Could not coerce value "10232162183" to ID

TO REPRODUCE

1. follow getting started steps faithfully so that products and collections are available to the private app's sales channel, and that the storefront api is enabled in the private app, etc

2. attempt to fetch a product by id

   import * as shopifyBuy from "shopify-buy"
   
   async function demo() {
       const shopifyClient = shopifyBuy.buildClient({
           domain: "dev-bakery.myshopify.com",
           storefrontAccessToken: "5f636be6b04aeb2a7b96fe9306386f25"
       })
       try {
           const product = await shopifyClient.product.fetch("10232162183")
           console.log("product", product)
       }
       catch (error) {
           error.message = "shopify buy error: " + error.message
           console.log(error)
       }
   }
   
   demo()
   
   //> shopify buy error:
   //>   message: "Variable id of type ID! was provided invalid value"
   //>   explanation: "Could not coerce value "10232162183" to ID"
   

   • X-Request-Id: 906a6686-bbdf-430b-9515-a30adf0def26

   • response headers

     Access-Control-Allow-Origin: *
     Alt-Svc: clear
     Connection: keep-alive
     Content-Encoding: gzip
     Content-Type: application/json; charset=utf-8
     Date: Thu, 31 May 2018 23:02:33 GMT
     Server: nginx
     Strict-Transport-Security: max-age=7889238
     Transfer-Encoding: chunked
     Vary: Accept-Encoding
     Via: 1.1 google
     X-Content-Type-Options: nosniff
     X-Content-Type-Options: nosniff
     X-Dc: chi2,gcp-us-central1
     X-Download-Options: noopen
     X-Frame-Options: DENY
     X-Permitted-Cross-Domain-Policies: none
     X-Request-Id: 906a6686-bbdf-430b-9515-a30adf0def26
     X-ShardId: 77
     X-ShopId: 19617339
     X-Sorting-Hat-FeatureSet: default
     X-Sorting-Hat-PodId: 77
     X-Sorting-Hat-PodId-Cached: 1
     X-Sorting-Hat-PrivacyLevel: default
     X-Sorting-Hat-Section: pod
     X-Sorting-Hat-ShopId: 19617339
     X-Sorting-Hat-ShopId-Cached: 1
     X-XSS-Protection: 1; mode=block; report=/xss-report?source%5Baction%5D=query&source%5Bapp%5D=Shopify&source%5Bcontroller%5D=api%2Fgraphql&source%5Bsection%5D=api&source%5Buuid%5D=906a6686-bbdf-430b-9515-a30adf0def26
     

   • data sent to api (request payload)

     {"query":"fragment VariantFragment on ProductVariant  { id,title,price,weight,available,sku,compareAtPrice,image { id,src,altText },selectedOptions { name,value } },fragment ProductFragment on Product  { id,createdAt,updatedAt,descriptionHtml,description,handle,productType,title,vendor,tags,publishedAt,onlineStoreUrl,options { id,name,values },images (first: 250) { pageInfo { hasNextPage,hasPreviousPage },edges { cursor,node { id,src,altText } } },variants (first: 250) { pageInfo { hasNextPage,hasPreviousPage },edges { cursor,node { ...VariantFragment } } } },query ($id:ID!)  { node (id: $id) { __typename,...ProductFragment } }","variables":{"id":"10232162183"}}
     

   • payload of the response

     {"errors":[{"message":"Variable id of type ID! was provided invalid value","locations":[{"line":1,"column":564}],"value":"10232162183","problems":[{"path":[],"explanation":"Could not coerce value \"10232162183\" to ID"}]}]}
     

EXPECTED BEHAVIOR

product should be returned, no error thrown

Environment (please complete the following information):

• OS: xubuntu
• Browser: chrome
• SDK Version: 1.4.0

ADDITIONAL CONTEXT

i thought i had followed the getting started and installation instructions carefully, but for some reason the api is saying i'm passing an invalid type

the error says i'm using the wrong type, however, i've tried passing the id as a string and also as an integer — i receive the same error either way

a few months ago, i had fetched some products and collections the same way via the shopify-buy-sdk, but for some reason, this simple procedure isn't working for me anymore

i'm running this from my http://localhost:8080 dev server, though i couldn't find a specific control panel that might whitelist this domain for my access token -- if the error is accurate, this shouldn't be affecting my scenario

i also tried passing the id's as base64 using btoa, though the same error was thrown

Bug Report Checklist

• [x] I have read and agree to the CODE_OF_CONDUCT.md
• [x] I have read the CONTRIBUTING.md guidelines.
• [x] I have provided a detailed description of the bug, including code samples, and/or network data.
• [x] I have provided information about my development environment, including SDK version.

[chase-moskal]

perhaps this person on ecommerce.shopify.com could be experiencing the same problem?

[chase-moskal]

i found that the following fetchAll call works, and returns a graph model object containing product results

• const products = await shopifyClient.product.fetchAll()

interestingly, these results have completely different IDs than are expressed here at this getting started article

• js-buy-sdk / getting-started / retrieve product ids

i believe that this documentation is outdated -- that method of gathering IDs as cited in the article now seems invalid

i suspect now we have to use fetchAll as a developer in order to initially ascertain our available product and collection ids

[StefanSlehta]

Hi chase! You can use btoa(`gid://shopify/${type}/${id}`) to make a global id and fetch it that way. The type in your case would be Product. So the final string would look something like gid://shopify/Product/1234567890. If you run atob() on your returned IDs you'll see that this is what they look like.

[onamfc]

To fetch a product from the Shopify storefront API, you must base64encode the following

gid://shopify/Product/product_id

To find your product_id, open the product in the Shopify dashboard and find the number at the end of the url like so

https://yourshopname.myshopify.com/admin/products/123456789

your final query statement will look like this -

shopifyClient.product.fetch("Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzEwMjMyMTYyMTgz")

[lpender]

Why not put this in the README or the documentation ?

[kith-and-kin]

Why not put this in the README or the documentation ?

I've just been tripped up by this too. The documentation doesn't appear to mention anywhere that the IDs require base64 conversion first. I could see that clearly the IDs were not of the same flavour but not how to find the longer ID format.

The examples should mention this required step.
https://shopify.github.io/js-buy-sdk/

[sshaw]

May as well just support both IDs.

There's also this. May use it as this is the 2nd or 3rd time I've had to convert between the two use this library.