403 error when making graphql XHR request to Shopify

I’m getting an error “Cannot read properties of undefined” from the src/api/operations-builder.ts (98:25) file from the nextjs-shopify repo. The cause looks like it’s because of an XHR request to https://my-store.myshopify.com/api/2020-07/graphql (“my-store” is replaced with a fake name here).

This happens when I try to add a Product Grid component to the page. The Product List shows up just fine in the Builder editor, but it seems to have a connection problem in the app shown in the editor once the Product Grid component has been added to the page. Here’s the request header copied from the Chrome console…

  1. :authority: my-store.myshopify.com
  2. :method: POST
  3. :path: /api/2020-07/graphql
  4. :scheme: https
  5. accept: application/json
  6. accept-encoding: gzip, deflate, br
  7. accept-language:
  8. content-length: 3307
  9. content-type: application/json
  10. origin: http://localhost:3000
  11. referer: http://localhost:3000/
  12. sec-ch-ua: " Not A;Brand";v=“99”, “Chromium”;v=“96”, “Google Chrome”;v=“96”
  13. sec-ch-ua-mobile: ?0
  14. sec-ch-ua-platform: “macOS”
  15. sec-fetch-dest: empty
  16. sec-fetch-mode: cors
  17. sec-fetch-site: cross-site
  18. sec-gpc: 1
  19. user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36
  20. x-sdk-variant: javascript
  21. x-sdk-version: 2.11.0
  22. x-shopify-storefront-access-token: checked-and-matches-in-shopify

image


@bruceultra We recently made some changes to our nextjs-shopify repo that might help clear this up. You can see an outline of the changes here: What happened to my Shopify <> Builder sync requests? · Issue #25 · BuilderIO/nextjs-shopify · GitHub

Could you pull from master and see if that resolves your issue? If you continue to see the issue, please send us a link to your space or your API key (here or in a DM is fine) and I can investigate further