Products are not fetching using buy-button-js

Topic summary

An Angular application using Shopify’s buy-button-js library stopped fetching products correctly after working for years without issues. The problem began approximately 2 weeks ago.

Error Details:
The browser console shows GraphQL errors related to field selection mismatches, specifically:

  • Fields like ‘price’, ‘compareAtPrice’, and ‘presentmentPrices’ have selection or compatibility issues
  • Error messages indicate fields must have selections or don’t exist on certain types

Workaround Found:
The original poster resolved the issue by:

  • Switching from buy-button-js to the js-buy-sdk (https://shopify.github.io/js-buy-sdk/)
  • Using the unoptimized UMD version which includes all necessary fields
  • Writing custom GraphQL queries to fetch product data, then passing handles to the buy-button-js library
  • Moving implementation to an Express backend due to difficulties integrating js-buy-sdk with Angular’s frontend module

Ongoing Challenges:
While functional, this workaround is described as “a huge pain” and only a temporary solution. The poster hopes someone can fix the issue using buy-button-js directly.

Another user reported experiencing similar product loading issues on their live website (though preview mode works), which started last weekend after 7 years of stable operation. They’ve opened support tickets without resolution.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.

Hello everyone,

I’m having some problems with my connection from my Angular app to the buy-button-js. It was working for years and we have no problem with it until recently when we noticed the products were not fetching correctly. The error is pasted below from the browser console.

This is my init code:

var client = ShopifyBuy.buildClient({
domain: ‘xxxxxxxxxxxxx.myshopify.com’,
storefrontAccessToken: ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’
});
var ui = ShopifyBuy.UI.init(client);

And here is what I had previously to fetch products:

let query = {
first: 10,
}
client.product.fetchQuery(query).then((products) => {
$scope.productList = products
$scope.displayList();
})

Easy and simple but now I get this very tough to figure out errors.

products:1 Uncaught (in promise)

  1. (3) [{…}, {…}, {…}]
  2. 0:
  3. extensions: {code: ‘selectionMismatch’, nodeName: “field ‘price’”, typeName: ‘MoneyV2’}
  4. locations: [{…}]
  5. message: “Field must have selections (field ‘price’ returns MoneyV2 but has no selections. Did you mean ‘price { … }’?)”
  6. path: (2) [‘fragment VariantFragment’, ‘price’]
  7. [[Prototype]]: Object1. 1:
  8. extensions: {code: ‘undefinedField’, typeName: ‘ProductVariant’, fieldName: ‘presentmentPrices’}
  9. locations: [{…}]
  10. message: “Field ‘presentmentPrices’ doesn’t exist on type ‘ProductVariant’”
  11. path: (2) [‘fragment VariantFragment’, ‘presentmentPrices’]
  12. [[Prototype]]: Object1. 2:
  13. extensions: {code: ‘selectionMismatch’, nodeName: “field ‘compareAtPrice’”, typeName: ‘MoneyV2’}
  14. locations: [{…}]
  15. message: “Field must have selections (field ‘compareAtPrice’ returns MoneyV2 but has no selections. Did you mean ‘compareAtPrice { … }’?)”
  16. path: (2) [‘fragment VariantFragment’, ‘compareAtPrice’]
  17. [[Prototype]]: Object1. length: 3

When did this issue start? Does it affect your website in Preview mode as well, or only Live website? We are dealing with an issue which has been preventing our product pages from loading on the Live website (though it still works properly in Preview). We have used the same code for 7 years without any issues, until this started happening last weekend. Are you getting any answers from Shopify? We have opened tickets and escalated for days without any help… very frustrating and feeling hopeless.

Hi Jamie,

Issue started maybe 2 weeks from now, I followed the instructions again to set up the buy-button-js from https://shopify.github.io/buy-button-js/ but no luck. I’ve actually figured what I had to do and it’s to follow the instructions from the js-buy-sdk https://shopify.github.io/js-buy-sdk/ and use the UMD version of the js file that includes all fields I need that are listed in the error above.

“You can also fetch the unoptimized release for a version (2.0.1 and above). This will be larger than the optimized version, as it will contain all fields that are available in the Storefront API:”

So now I’m using GraphQL to query the handles to list the products to use with the buy-button-js library. A huge pain but it’s the only workaround for me right now. Also, I can’t figure how to use the js-buy-sdk in my frontend client Angular in the angular.module so I moved it to my express app on the backend.

I hope someone is able to fix the issue with just using buy-button-js.