Products are not fetching using buy-button-js

[dtran914]

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) [{…}, {…}, {…}]
1. 0:
1. extensions: {code: 'selectionMismatch', nodeName: "field 'price'", typeName: 'MoneyV2'}
2. locations: [{…}]
3. message: "Field must have selections (field 'price' returns MoneyV2 but has no selections. Did you mean 'price { ... }'?)"
4. path: (2) ['fragment VariantFragment', 'price']
5. [[Prototype]]: Object
2. 1:
1. extensions: {code: 'undefinedField', typeName: 'ProductVariant', fieldName: 'presentmentPrices'}
2. locations: [{…}]
3. message: "Field 'presentmentPrices' doesn't exist on type 'ProductVariant'"
4. path: (2) ['fragment VariantFragment', 'presentmentPrices']
5. [[Prototype]]: Object
3. 2:
1. extensions: {code: 'selectionMismatch', nodeName: "field 'compareAtPrice'", typeName: 'MoneyV2'}
2. locations: [{…}]
3. message: "Field must have selections (field 'compareAtPrice' returns MoneyV2 but has no selections. Did you mean 'compareAtPrice { ... }'?)"
4. path: (2) ['fragment VariantFragment', 'compareAtPrice']
5. [[Prototype]]: Object
4. length: 3

[Jamie_Kasza]

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.

[dtran914]

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.