productNodeQuery, variantNodeQuery, etc. not available on 'client'

[paulgrieselhuber]

Hello,

I am trying to run a product query per the v1alpha docs, as such:

const query = productNodeQuery(['title', ['variants', variantConnectionQuery(['price', 'title'])]]);
client.fetchProduct('theproductid...=').then((product) => {
  console.log(product);
});

client is available, productNodeQuery, etc. are not. Here is my configuration:

import Client, {Config} from 'shopify-buy';
...

var config = new Config({
  domain: 'domain.myshopify.com',
  storefrontAccessToken: 'token'
});
client = new Client(config);

client.createCheckout().then((checkout) => {
  console.log(checkout.id); // The ID of the checkout. Store this for later usage.
  localStorage.setItem('checkoutId', checkout.id); // Store the ID in localStorage
});
const checkoutId = localStorage.getItem('checkoutId');

const query = productNodeQuery(['title', ['variants', variantConnectionQuery(['price', 'title'])]]);
client.fetchProduct('theproductid...=').then((product) => {
  console.log(product);
});

result is productNodeQuery and variantConnectionQuery are no defined. What might I be doing wrong?

[minasmart]

Those variables do not exist in the scope you've defined above. You either need to declare them or import them from somewhere. In the case of productNodeQuery, it's actually available on the Client class. Access it with Client.Queries.productNodeQuery.

[paulgrieselhuber]

Thanks for the clarification. I grabbed that code from the v1alpha docs here: https://github.com/Shopify/js-buy-sdk/blob/v1.0alpha/docs/MIGRATION_GUIDE.md. There's not mention of the difference in scope, might be worth an update.

This solved it for me by the way, thanks again.

[minasmart]

Those docs assume there you already have a client and the client class available. The query names and locations are document in the API Reference, but it should be more clear in the migration guide. To be clear though: This isn't just a js buy specific thing. Variables must be either declared or imported before they're accessible, as a javascript wide constraint.