Shopify / js-buy-sdk

The JS Buy SDK is a lightweight library that allows you to build ecommerce into any website. It is based on Shopify's API and provides the ability to retrieve products and collections from your shop, add products to a cart, and checkout.

Home Page:https://shopify.github.io/js-buy-sdk

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Changes to the product ID returned from api call?

natclamp-moj opened this issue · comments

Please complete the checklist before filing an issue:

  • Is this a "how to" question? For questions on how to use the SDK, implement features or other related questions, please use our forums.
  • Is this something you can debug and fix? Create a pull request and contribute! Bug fixes and documentation fixes are welcome. You can read our contribution guidelines for more details.

Bug details

Describe the bug
When I set up my react app, the product data I could pull from my clients shopify account had an ID along the lines of Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzM2OTMxMjU4NA== but now, I'm getting a different ID style (gid://shopify/Product/6000747282586) despite not making any changes (as far as I'm aware). This is messing with the subsequent call to get the singular product when when chosen from a list of products. I get the error Variable $id of type ID! was provided invalid value, and Invalid global id '6000747282586' if I try and pass just the id number in. Everything was working previously, I was just passing the id (which looked like Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzM2OTMxMjU4NA== ) around to the different functions.

To Reproduce
Steps to reproduce the behaviour:
Using react@17.0.2, Node@16.15

fetchAllProducts = async () => { const products = await client.product.fetchAll(); this.setState({ products }); };

fetchProductWithId = async (id) => { const product = await client.product.fetch(id); this.setState({ product }); };

When I call fetchProductWithId I get the id from the params (originally this was fine as it was the encoded string)

0: GraphModel availableForSale: (...) createdAt: (...) description: (...) descriptionHtml: (...) handle: (...) hasNextPage: Scalar {value: true} hasPreviousPage: false id: "gid://shopify/Product/5790303813786" images: (...) nextPageQueryAndPath: ƒ () onlineStoreUrl: (...) options: (...) productType: (...) publishedAt: (...) refetchQuery: (...) title: (...) type: (...) updatedAt: (...) variableValues: {first: 20} variants: (...) vendor: (...)

Expected behaviour
I expect the product ID to be a simple encoded string of letters/numbers (as it was before)

Environment (please complete the following information):

  • OS: iOS
  • Browser: Chrome
  • SDK Version: 2.14.0

Bug Report Checklist

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

Exact same issue, any help? Did you figure it out?

https://shopify.dev/api/examples/object-ids

"Caution
As of April 1, 2022, using Base64-encoded object IDs as arguments to fields and mutations will be deprecated. Support for this behavior will be removed in the 2023-01 release."

I think this why it stopped now working. It has been deprecated.

Breaking changesAnchor link to section titled "Breaking changes"
These changes require special attention. If your app uses these API resources and you don’t upgrade to a more recent API version, then your app will break.

Non-encoded object IDs in the GraphQL Storefront APIAnchor link to section titled "Non-encoded object IDs in the GraphQL Storefront API"
Most object types in Shopify's GraphQL APIs have an id field. The id field represents the globally-unique identifier for an individual record. Currently, Shopify serves Base64-encoded object IDs from the supported stable versions of the GraphQL Storefront API.

As of January 3, 2022, Shopify began serving non-encoded object IDs from the unstable version of the GraphQL Storefront API. The 2022-04 release is the first stable version that doesn't serve Base64-encoded object IDs.

If you're caching, persisting to a database, or parsing IDs, then you need to migrate your app.

So my question now is:
Apparently SDK was bumped up for this version (see below)... so why doesn't it work?

"v2.15.1 (April 4, 2022)
Bumps the SDK to use Storefront API version 2022-04. For more information, see the Release Notes.
Add product.fetchRecommendations function that allows for fetching recommended products for a product."

Changing the format of ids is a breaking change that should be reflected in the version number of a node package. As mentioned, this breaks functionality like e.g. saving favorites where ids are stored.

So the solution is to stay on 2.14.0 and migrate the app.

Not sure i understand what you mean. Shopify API now sends the non enconded ids back.
The shopify-buy npm package still expects a longer encoded string.
Since it comes from shopify itself, don't we need the npm package updated?

I think I will just stick with 2.14.0 and encode the ids myself

Would you be down to explain here how to encode the ids?

I tried to encode the checkout id but it doesn't seem to work.

I tried to encode the checkout id but it doesn't seem to work.

It's a simple atob('new url style id') and btoa('oldstyleidendingwith=') base64

I dont remember seeing any mail about this... how hard would it have been for shopify to message their customer base using the api. not hard, they know who is using it.